弹出create react app后如何减少文件更改

Question

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

{
  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 文件发生变化，应用程序就不会自动编译 less 文件。只有当我更改 css 或 js 文件时，应用程序才会重新编译 less 文件中的更改。

似乎create-react-app webpack 配置没有监视less 文件的变化。我已经搜索了很长时间，只有关于如何在不弹出的情况下观看 Less 的答案。

Answer 1

如果您弹出 Create React App，您最终应该在 ./config 目录中有两个 webpack.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$/ 并在其 use 数组的末尾添加 require.resolve('less-loader')。

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

弹出create react app后如何减少文件更改

How can I watch less file changes after ejecting create react app

less

webpack

create-react-app