A complete solution for introducing sass in Vue 2.0

suchaoken 2021-09-15 10:26:59

1. sass-loader Depend on node-sass, So install node-sass

npm install node-sass --save-dev       // install node-sass
npm install sass-loader --save-dev         // Install dependency packages sass-loader
npm install style-loader --save-dev        // install style-loader

2.  stay build Under folder webpack.base.conf.js Of module Next  rules Add configuration inside

test: /.sass$/,
loaders: ['style', 'css', 'sass']

If the project does not report an error, you can refer to the following solutions :

1. This is a vue project ( from vue-cli establish ) introduce sass after , Error packing project . The mistake is sass-loader Version

Solution : stay package.json Lieutenant general “sass-loader”:"^10.0.1" The version is revised to "sass-loader": "^7.3.1", And then again npm install

2. After creating this file , There are new mistakes “Node Sass version 5.0.0 is incompatible with ^4.0.0.”
Solution :
Uninstall the installed version npm uninstall node-sass
install npm install [email protected]
Solve the problem successfully . The project was packaged successfully
Finally, let's sum up vue-cli Create a vue Project time , introduce sass Steps for [ Don't need to configure , because vue-cli It's already configured for us in ]

1. Download and install :npm i node-sass sass-loader style-loader -D

2. It's ready to use 【lang="scss"】

Please bring the original link to reprint ,thank
Similar articles