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文件了

最新文章

  1. Python基础之条件和循环
  2. QML入门教程
  3. AOP 之 6.1 AOP基础(拾陆)
  4. JMX学习笔记(二)-Notification
  5. Android用户界面 UI组件--TextView及其子类(二) Button,selector选择器,sharp属性
  6. string.Format 指定字符串宽度
  7. MKNetworkKit 使用
  8. Maven之pom.xml 配置详解
  9. Java将数据写入word文档(.doc)
  10. 深入浅出docker
  11. Html细线表格的实现 打印边框设置
  12. JAVA常见简答题
  13. 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
  14. HTML-JS 数组 内置对象
  15. C++中函数的形参为数组时,实质形参是指针
  16. 总结com组件问题,随笔记录
  17. 00405EB0 mov eax,dword ptr [ecx] 是什么意思?
  18. Java类编译、加载、和执行机制
  19. 算法:非平衡二叉搜索树(UnBalanced Binary Search Tree)
  20. 【转】Defunct进程 僵尸进程

热门文章

  1. Linux下源码编译安装MySql,centeros7
  2. ANSIBLE自动化管理工具
  3. C# 图像基本处理
  4. 代码检查工具sonarqube介绍
  5. SDK更新失败问题解决
  6. Can you answer these queries V SPOJ - GSS5 (分类讨论+线段树维护区间最大子段和)
  7. PHP程序员要掌握的技能
  8. Appium简介以及环境安装
  9. 关于Spring MVC写的不错的几篇博客
  10. Hadoop-No.7之行键