sass official website address: https://www.sass.hk/
Prelude:
step:
（1）npm install sass
Or npm install -g sass (Global Installation Sass)
Or npm install --save-dev sass (sass installation project)
Purpose: To provide sass
Screenshot successful installation:
（2）npm install sass-loader node-sass --save-dev
Purpose: To sass-loader and node-sass dependent.
node-sass sass into css file is compiled, the middleware can even automatically compiled by the way.
sass-loader is loaded and translated SASS / SCSS file
Reason: After performing npm install sass will complain directly, error screenshots:
It is the lack of prompt you rely node-sass.
Screenshot successful installation:
(3) sass-loader configuration
Find webpack.config.dev.js file;
Run npm run eject the documents in the config;
Is not running, the file node_modules / react-scripts / config;
Loaders modifications of rules as follows:
{ test: /.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], }
You can start pleasant to use.
Extra:
(1) installation pit node-sass
node-sass Institute Add: Https://Www.Npmjs.Com/package/node-sass
1) different versions corresponding to different versions of the node node-sass, correspond to the following:
| NodeJS | Minimum node-sass version | Node Module |
|---|---|---|
| Node 12 | 4.12+ | 72 |
| Node 11 | 4.10+ | 67 |
| Node 10 | 4.9+ | 64 |
| Node 8 | 4.5.3+ | 57 |
2) the installation fails
One reason: When you install npm node-sass-dependent, will download files from the .node github.com. Since the problem of domestic network environment, the download time can be very long, and even lead to a timeout failure.
Solution:
Approaches 1, the global mirror source installation: NPM config SET sass_binary_site https://npm.taobao.org/mirrors/node-sass/
2 approach, the mirror is mounted Taobao: NPM the install -g CNPM --registry = HTTPS: //registry.npm.taobao.org (Installation CNPM)
cnpm install sass-loader node-sass --save-dev
Lack Python compiler environment under Windows environment: two reasons.
Solution: npm install -g node-gyp
npm install --global --production windows-build-tools (automatically install the cross-platform compiler: gym)
(2) sass-loader Address: https://www.webpackjs.com/loaders/sass-loader/