弹出创建反应应用程序后如何查看更少的文件更改

【问题标题】：How can I watch less file changes after ejecting create react app弹出创建反应应用程序后如何查看更少的文件更改
【发布时间】：2018-05-18 08:57:20
【问题描述】：

最近，我使用 create-react-app 创建了一个 React 项目，并且为了自定义项目而将其弹出。然后我想添加对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 文件发生变化时，应用程序都不会自动编译该 less 文件。只有当我更改 css 或 js 文件时，应用程序才会重新编译更少文件中的更改。

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

【问题讨论】：

标签： webpack less create-react-app

【解决方案1】：

如果您退出 Create React 应用程序，您最终应该在 ./config 目录中有两个 webpack.config 文件：webpack.config.prod.js 和 webpack.config.dev.js。

注意：ExtractTextPlugin 是在 prod 配置文件中定义的，而不是在 dev 配置文件中。

通过安装less 和less-loader，我设法减少了使用量

npm install --save-dev less less-loader

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

它适用于我并且观看的文件更少。

【讨论】：