React脚手架配置Sass

chat

参照官网安装好react脚手架后 希望使用scss来编写样式,让项目支持scss的步骤:

1.安装依赖
npm install sass-loader node-sass --save-dev

2.修改webpack配置

路径:\node_modules\react-scripts\config\webpack.config.js

搜索:file-loader,在file-loader 排除项里添加 scss:
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.scss$/],

file-loader下边有一段注释提示 我们 应该在file-loader前面添加新的loader:

// Make sure to add the new loader(s) before the "file" loader.

因此 在 file-loader 前面加入:

{

    test:/\.scss$/,

    loaders:['style-loader','css-loader','sass-loader']

}

现在 可以将项目src目录下的App.css 改为 App.scss 并使用scss来写样式了

版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/2180/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
React脚手架配置Sass
react脚手架配置scss css预处理器
<<上一篇
下一篇>>
chat