时间戳

首页 > 解决方案 > 如何在带有 webpack 4.29 的 React 16.7 中使用 LESS？

javascript - 如何在带有 webpack 4.29 的 React 16.7 中使用 LESS？

问题描述

我刚开始学习 React，我想在 React 中少用一些。我对此进行了一些研究，他们说我应该将配置写入其中，webpack.config.dev.js但是运行后npm run eject我只得到一个文件：webpack.config.js.

我想这可能是因为更新，新版本可能将 webpack.config.dev.js 和 webpack.config.prod.js 合并为 `webpack.config.js 。

我检查了 webpack 的主页，上面写着：

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.js$/,
      issuer: /\.less$/,
      use: [{
        loader: 'js-to-less-loader'
      }]
    }]
  }
};

但我不知道在哪里插入这些代码。我没有找到任何这样的代码。所以我想要一个简单的例子来说明如何在 React 中支持 less。

谢谢。

标签： javascriptreactjswebpackless

解决方案

弹出后需要执行以下步骤才能在 react 中使用 less

1. Go to webpack.config.js file and search for cssRegex change it from /\.css$/ to /\.(?:le|c)ss$/
2. install less and less loader using npm install -S less less-loader
3. search for getStyleLoaders method in webpack config file and add the following object to array of loaders specified over there
    {
     loader: require.resolve('less-loader'),
     options: {
      importLoaders: 1,
     },
    }

那么你会很高兴，如果有的话，请随时要求澄清

推荐阅读