create-react-app 无节点编译答案

【问题标题】：create-react-app node-less compilationcreate-react-app 无节点编译
【发布时间】：2017-12-07 06:10:31
【问题描述】：

我使用node-less 编译器和create-react-app webpack 配置来编译我的less 文件。编译速度极慢，每次文件更改需要近 5-8 秒。

这是我的 webpack 配置的一部分，它指定了更少的编译：

{
  exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.css$/,
    /\.json$/,
    /\.svg$/,
    /\.less$/
  ],
  loader: 'url',
  query: {
    limit: 10000,
    name: 'static/media/[name].[hash:8].[ext]'
  }
},

{
  test: /\.less$/,
  loaders: [
    'style-loader',
    'css-loader?modules&importLoaders=1&localIdentName="[name]__[local]___[hash:base64:5]"',
    'postcss-loader',
    'less-loader'
  ]
},

我希望编译和以前一样快（或几乎一样快）（当我没有使用 less 加载器时）

提前致谢！

【问题讨论】：

标签： reactjs webpack create-react-app

【解决方案1】：

我也开始使用 less 加载器，但随后阅读了 Dan Abramov 关于添加 css 预处理器的评论并切换到他的解决方案。效果非常好 - 下面是评论的链接，但简而言之 - 你不需要弹出和更改 create-react-app 默认配置 - 只需添加一个文件监视器，它可以监视你的 less 文件并将其编译为 css 文件并让webpack 使用这些编译的 css 文件。无需更改配置！

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc.

【讨论】：