create-react-app 配置 less

目前创建react项目一般使用 create-react-app 这个脚手架工具来创建,但这种方式默认没有对于less的配置。所以我们自己配置一下:

1. 暴露出webpack配置文件

使用create-react-app 创建的项目默认是看不到webpack配置文件的,需要先暴露出来,然后才能修改里面的配置信息。

终端运行一下命令(注意:此命令一旦运行会修改package.json 文件,不可回退

npm run eject

2. 安装less和less-loader

运行以下命令:

npm install less-loader less --save

如果遇到安装失败的情况,请改用cnpm。

3. 修改webpack配置文件

运行完以上命令后,项目根目录下会多出一个 config 文件夹,找到里面的 webpack.config.js 这个文件

create-react-app 配置 less_第1张图片
image

3.1 增加less配置1

找到下面这段代码


create-react-app 配置 less_第2张图片
image

在这下面直接添加以下代码:

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

道理大家应该懂:webpack里配置了css和sass,我们想用less就需要加入less配置。

3.2 增加less配置2

在此文件中搜索 oneof

create-react-app 配置 less_第3张图片
3.png

可以看到关于sass部分的配置,那我们再加入less的相关配置:先复制一份,将sass部分修改为less,再加入oneOf数组。

把我的复制出来,大家可以直接用:

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

这样就配置完成,可以直接使用less了。

你可能感兴趣的