通过create-react-app创建的react项目使用sass

最新推荐文章于 2023-04-10 17:16:01 发布

原创最新推荐文章于 2023-04-10 17:16:01 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #sass #react中使用sass #sass在react中配置

React 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Webpack中配置并使用Sass预处理器，包括安装必要的依赖包、修改Webpack配置文件以及设置Sass编译任务，帮助开发者快速上手。

step1:安装sass
npm install sass-loader node-sass --save-dev
step2:配置sass
    1、找到webpack.config.dev.js和webpack.config.prod.js
    2、分别修改test: /\.css$/改为test: /\.(css|scss)$/，并且在use:[]中添加即use:[...,...,{loader: require.resolve('sass-loader')}]
}
step3:在package.json中scripts:{}中添加
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",