react基础配置scss
创建react项目
· npm install create-react-app
· create-react-app [项目名称]
· npm start
目录结构及配置
1.对创建好的项目的进行删减，只留下index.js文件即可。然后创建一个App.js和App.scss文件。src文件夹的目录结构如下所示
图片:
2.暴露webpack，使config在一级文件夹可见。
· npm run eject
3.下载sass
· npm install sass-loader node-sass --save-dev
4.配置config文件夹下的webpack.config.js文件。
首先，将const cssRegex = /\.css$/;修改为const cssRegex = /\.css|scss$/;
然后，在getStyleLoaders，添加loader代码{loader: require.resolve('sass-loader')},
5.src中三个文件的内容
index.js
App.js
App.scss
6.样式生效效果
7.有借鉴部分内容: 配置React项目 及 LESS 或 SASS 的引入
cssModule配置
1.cssModule是唯一标识一个class名，在className变量名相同时也会生成不同的哈希值，来避免名字重复，使其唯一。
配置scss的cssModule。
将webpack.config.js中的const cssModuleRegex = /\.module\.css$/;
修改为const cssModuleRegex = /\.module\.css|scss$/;
如下图
App.js中的代码及scss样式文件的名称如下图：
2.样式文件名称为[name].module.scss的原因是参照webpack.config.js文件中所阐述的规则而命名。如图所示：
…ending