Create React App弹出后，如何实现Less文件变更自动监听编译？

我之前也碰到过一模一样的情况，问题核心其实是在dev环境下用了ExtractTextPlugin处理Less，这和create-react-app默认的dev环境样式处理逻辑冲突，导致webpack-dev-server没法正确监听Less文件的变更。下面是具体的解决步骤：

1. 调整dev环境的Less Loader配置 #

打开webpack.config.dev.js，把你之前加的Less配置替换成和dev环境CSS一致的处理方式（移除ExtractTextPlugin，改用style-loader）：

{
  test: /\.less$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        sourceMap: true,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        plugins: () => [
          require('autoprefixer')({ browsers: ['last 4 versions'] }),
        ],
        sourceMap: true,
      },
    },
    {
      loader: require.resolve('less-loader'),
      options: {
        sourceMap: true,
      },
    },
  ],
}

为啥要去掉ExtractTextPlugin？因为dev环境下create-react-app默认用style-loader把样式直接注入DOM，这样webpack能实时追踪样式文件的变更并触发热更新；而ExtractTextPlugin是把样式提取到单独文件，在dev模式下会打破这种实时监听机制，只有当依赖该样式的JS/CSS文件变化时才会重新编译Less。

2. 确认webpack-dev-server的监听规则 #

检查webpack.config.dev.js里的watchOptions（如果没有可以手动添加），确保没排除.less文件：

watchOptions: {
  ignored: /node_modules/,
  // 默认只排除node_modules，所以这一步通常不用额外修改，确保没加针对.less的忽略规则就行
}

3. 确保Less文件被正确引入组件 #

webpack只有在Less文件被纳入依赖图时才会监听它，所以必须在React组件里通过import引入Less文件，比如：

// 在你的组件.js文件中
import './YourComponent.less';

如果Less文件没被任何JS文件引用，webpack根本不会把它加入监听范围。

4. 重启开发服务器 #

修改完webpack配置后，一定要重启npm start，让新配置生效。

这样调整后，你修改Less文件时，webpack-dev-server就会自动检测到变更并实时编译更新页面了。

内容的提问来源于stack exchange，提问作者Lin Shen