React168更改Webpack支持Less文件

46次阅读

共计 1221 个字符,预计需要花费 4 分钟才能阅读完成。

创建项目

当前最新 React 版本是 16.8.6
使用 create-react-app 脚手架工具创建一个项目
由于要在项目中使用 AntD

暴露配置文件

配置 less-loader 需要暴露 webpack 配置文件,这就要使用 create-react-app 脚手架工具提供的 eject 命令,运行命令前需要将项目 commit 一下,否则项目无法 eject 成功,打开终端运行 yarn eject 命令(或者 npm run eject),eject 命令是一次性命令,运行后无法恢复,

yarn eject

能看到文件中多出了 config 文件夹

配置 less

接下来安装 less 和 less-loader 插件包,打开终端输入:

cd your-project
yarn add less less-loader

打开 config 文件夹,找到 webpack.config.js 文件打开,主要修改里面的三处地方:

1. 修改 style files regexes(样式文件正则),找到 注释 style files regexes,在这部分最后添加如下两行代码:

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

2. 修改 getStyleLoaders 函数,添加代码

{loader: require.resolve('less-loader'),
  options: lessOptions,
},

3. 添加如下代码,如下图

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  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 less
            // using the extension .module.scss or .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

至此修改完成,重新打包

正文完
 0