首页 > 其他 > 详细

React的Sass配置

时间:2019-11-22 16:44:00      阅读:179      评论:0      收藏:0      [点我收藏+]

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

技术分享图片

 

 

 

React的Sass配置

原文:https://www.cnblogs.com/wind-wang/p/11912080.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!