react基础配置scss

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