在create-react-app的脚手架里面使用scss

以前用vue-cli脚手架的时候，只须要引进sass须要的依赖包即可以引入scss，可是在create-react-app的时候，发现除了须要引入sass依赖，还须要进行配置：

无论用什么方法进行sass的使用，都要引入sass的相关依赖：

npm install sass-loader node-sass --save-dev

方法一：进行webpack.config的配置，直接在文件中引入scss

1.找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js文件（两个文件都要改）

将module配置项的最后一项配置改为以下：

{ loader: require.resolve('file-loader'),

loaders. exclude: [/\.js$/, /\.html$/, /\.json$/,/\.scss$/],

options: { name: 'static/media/[name].[hash:8].[ext]',

},

},

{ test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], }

　　

2.3.在入口js 文件中引入：import './***.scss';

3.在package.json中srcipt 引入：build-css ,watch-css

 

 

方法二：使用node-sass-chokidar，将scss转移成css，在文件中引入

1.下载node-sass-chokidar的依赖包：

npm install --save node-sass-chokidar

　2.在package.json中srcipt 引入：build-css ,watch-css

 "build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",

3.运行npm run watch-css，在文件中引入编译的css文件