I wanted to use scss in my vue project, but it took a lot of time. Encountered many problems and experienced rollbacks. And delete all installation packages. Uninstall and replace with a different version. . . . . . . .
Now let’s straighten it out.
Conventional operation method: ( This method is wrong, you can skip it! The correct method is at the end! )
1. Installation:
Warm reminder: I was confused after reading the information before. You only need to install node-sass and sass-loader here, because my vue project has already installed vue-style-loader by default, so don’t do anything unnecessary. To avoid version conflicts. Then more problems will arise.
Note: This direct installation is prone to version conflicts. You can directly install the corresponding version number at the end of the article! save time!
npm install node-sass --save-dev //Install node-sass
npm install sass-loader --save-dev //Install sass-loader
2. Configuration:
webpack.base.conf.js not found? Can be found in the build folder
Configuration rules under the webpack.base.conf.js file
rules:[
...
{ //This section is the default! Do not change! There is nothing below that you need to add manually, which is equivalent to compiling and recognizing scss!
test: /\.scss?$/,
loaders: ["style", "css", "sass"]
}
A pit has appeared
After installing it here, I get an error when I start using it:
This error is reported:
Module build failed: TypeError: this.getOptions is not a function
It is said online that the version installed by sass-loader is too high. Just uninstall and reinstall a lower version. Most of the people on the Internet install version 7. I installed 7.3.1.
Correct operation method:
1. First [uninstall] the previous sass-loader version (if it has been installed before):
npm uninstall sass-loader
2. Then [reinstall] version 7.3.1:
npm install [email protected] --save-dev
3. [Another new error]
After installation, the problem was solved. There will be another new error:
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
4. [The final solution? 】
This error comes from sass-loader. Because node-sass@latest is v5.0.0 and sass-loader expects ^4.0.0
The current solution is as follows:
4.1 Uninstall node-sass
npm uninstall node-sass -D
4.2 and then install the latest version (versions before 5.0 are OK)
Kind tips:
1. --save-dev is equivalent to -D
2. -D with version number should be written in front
cnpm install -D [email protected]
You're done!
If you find that the error is still being reported! Restart the project. That’s it!
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 Problem Solving_Abinhere's Blog-CSDN Blog
Installation and use of scss in Vue_m0_37605642's blog-CSDN blog
Install SCSS on vue project_Qingyang's blog-CSDN blog_vue install scss