javascript - 如何在 React 16.7 和 webpack 4.29 中使用 LESS?

标签 javascript reactjs webpack 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。

谢谢。

最佳答案

弹出后需要做以下步骤才能在react中少用

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,
     },
    }

然后你就可以开始了,如果有任何问题,请随时要求澄清

关于javascript - 如何在 React 16.7 和 webpack 4.29 中使用 LESS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55235124/

相关文章:

javascript - 在存储监听器中调用另一个操作是否是 Flux 的反模式?

node.js - 找不到模块'source-map-support/register

javascript - 在 webpack 中管理 jQuery 插件依赖

node.js - Angular 7 自定义 webpack.config.js

javascript - Tab 选择下一个元素

javascript - 为什么这个 setTimeout 根本不触发?

jquery - 在 javascript 中,我如何知道函数需要什么类型的参数

JavaScript Promise 返回 Pending 但我只需要值

javascript - react -将Promise与Edge一起使用时无法解析错误

javascript - 每次部署新版本的 Web 应用程序时如何清理浏览器缓存?