在create-react-app脚手架工具中增加less支持

create-react-app是FaceBook官方出品的一个React.js脚手架工具,集成了webpack等调试和打包工具,具体可以查看Github: https://github.com/facebookincubator/create-react-app

其默认支持css的import,但是不支持less,本文介绍如何简单的增加less的支持。

在create-react-app生成的项目文件夹中,是看不到webpack.config相关的文件的,而要增加less支持肯定是要更改webpack配置文件的,所以需要让这些文件暴露出来,使用以下命令即可:

npm run eject

之后便可以在项目目录下看到config文件夹,其中的webpack.config.dev.js和webpack.config.prod.js分别是开发环境和生产环境使用的webpack配置文件。

安装less-loader:

npm install less-loader less --save-dev

修改开发环境配置,编辑webpack.config.dev.js文件,需要改两个地方。

第一个地方:找到以下几行(版本不同位置可能不太一样)

exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.css$/,
    /\.json$/,
    /\.bmp$/,
    /\.gif$/,
    /\.jpe?g$/,
    /\.png$/,
],

将其中的.css改为.(css|less),内容变为:

exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.(css|less)$/,
    /\.json$/,
    /\.bmp$/,
    /\.gif$/,
    /\.jpe?g$/,
    /\.png$/,
],

第二个地方:找到test: /\.css$/

更改为test: /\.(css|less)$/

并在下面的use数组里面增加less-loader

{
    loader: require.resolve('less-loader') // compiles Less to CSS
}

更改完以后这部分代码大概长这个 样子:

      {
        test: /\.(css|less)$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          {
            loader: require.resolve('less-loader') // compiles Less to CSS
          }
        ],
      },

生产环境的配置也是类似上面的方法修改就可以了。

配置完成后,就可以直接import了:

import './style.less';