在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';

 

 

转载请保留链接：https://ilovetile.sijie.wang/3535/ 感谢您对版权的尊重

文章发表于：