Question

最近，我使用create-react-app创建了一个反应项目，并且我已经将其弹出以便自定义项目。然后我想添加对Less的支持，因此我在webpack.config.dev.js部分test: /\.css$/之前添加了以下代码。

{
  test: /\.less$/,
  use: ExtractTextPlugin.extract({
    // activate source maps via loader query
    use: [
      { loader: 'css-loader', options: { sourceMap: '' } },
      {
        loader: 'postcss-loader',
        options: {
          plugins() {
            return [
              require('autoprefixer')({ browsers: ['last 4 versions'] }),
            ];
          },
        },
      },
      { loader: 'less-loader', options: { sourceMap: '' } },
    ],
  }),
},

问题是，使用此配置，只要文件更少，应用程序就不会自动编译less文件。只有当我更改css或js文件时，应用程序才会在较少的文件中重新编译更改。

似乎create-react-app webpack配置没有观察到更少文件的更改。我已经搜索了很长时间，而且只有在没有弹出的情况下如何观看Less的答案。

Answer 1

如果弹出Create React App，则应该在webpack.config目录中有两个./config文件：webpack.config.prod.js和webpack.config.dev.js。

当心：ExtractTextPlugin是在生产配置文件中定义的，而不是在开发人员配置文件中定义的。

通过安装less和less-loader

，我设法减少了使用量

npm install --save-dev less less-loader

然后，在webpack.config.dev.js中，复制用于CSS（{test: /\.css$/, ...}）的规则。然后在其中一个规则中，将测试值更改为test: /\.less$/，并在其require.resolve('less-loader')数组的末尾添加use。

它对我有用，并且观看的文件更少。

如何在弹出创建反应应用

1 个答案: