React的Sass配置
2024-08-28 05:15:56
React提供的脚手架creact-react-app创建的工程文件不像vue那种暴露出webpack来,所以添加依赖需要拐个弯。
为了配置sass需要按以下步骤进行:
一、安装sass-loader和node-sass依赖
npm install sass-loader node-sass --save-dev
二、打开react的webpack配置
node_modules/react-scripts/config/webpack.config.js
找到module下的rules,oneof数组中,然后找到最后一个配置,修改成如下的样子
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
{
test:/\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
三、这样就可以愉快地使用scss文件了
最新文章
- Python基础之条件和循环
- QML入门教程
- AOP 之 6.1 AOP基础(拾陆)
- JMX学习笔记(二)-Notification
- Android用户界面 UI组件--TextView及其子类(二) Button,selector选择器,sharp属性
- string.Format 指定字符串宽度
- MKNetworkKit 使用
- Maven之pom.xml 配置详解
- Java将数据写入word文档(.doc)
- 深入浅出docker
- Html细线表格的实现 打印边框设置
- JAVA常见简答题
- 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
- HTML-JS 数组 内置对象
- C++中函数的形参为数组时,实质形参是指针
- 总结com组件问题,随笔记录
- 00405EB0 mov eax,dword ptr [ecx] 是什么意思?
- Java类编译、加载、和执行机制
- 算法:非平衡二叉搜索树(UnBalanced Binary Search Tree)
- 【转】Defunct进程 僵尸进程