[react ] webpack配置less、sass/scss

1、使用 cnpm run eject 命令暴露 webpack.config.js

在这里插入图片描述

2、页面已经有 验证规则,less 没有,所以添加 less 的

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

在这里插入图片描述

3、依葫芦画瓢,复制一份 sass 的,如下代码:复制粘贴到 sassModuleRegex 的后面

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.less or .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

4、分别安装 sass、less 依赖

cnpm install node-sass
cnpm install less-loader --save

5、yarn start 重新编译,根目录 index.js 中引入,如下图:
在这里插入图片描述

import './assets/style/public.scss';
import './assets/style/title.less';

在这里插入图片描述

6、页面使用,如下图:

在这里插入图片描述
在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章