如何在 React 16.7 和 webpack 4.29 中使用 LESS？

Question

刚开始学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'
      }]
    }]
  }
};

但我不知道在哪里插入这些代码。我没有找到任何类似 that.so 的代码，我想要一个简单的示例来说明如何在 React 中支持 less。

谢谢。

Answer 1

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

那你就可以开始了，如有任何疑问，请随时询问

Answer 2

我相信您正在使用 create-react-app 初学者工具包。嗯，这很好，但如果您想为您的设置添加更多功能，入门套件有其自身的复杂性。

您可以学习设置 React，而不是让入门工具包为您处理。

无论如何你可以试试这个，

您将需要 babel depedencies 来处理转译：

npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev

像这样设置你的反应依赖：

npm i react react-dom --save-dev

完成此设置后，使用以下代码包含 .bablerc 文件：

{
  "presets" : [
    "env",
    "react"
  ]
}

设置依赖项以加载您的 css/less 文件。这将获取 css 及以下所需的所有加载器。

npm install less less-loader style-loader css-loader --save--dev

现在你需要一个 HTML 插件和一个模板 .html webpack 文件来服务你的反应。

npm i html-webpack-plugin html-loader --save-dev

模板文件（另存为src/index.html）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<style>
    * {
        box-sizing: border-box;
    }
</style>
<body>
    <div class='content' id='app'></div>
</body>
</html>

您现在需要一个 webpack devServer 来为生成的 index.html

npm install webpack-dev-server --save-dev

将以下内容添加到您的 package.json 文件

"scripts": {
  "start": "webpack --mode development",
  "build": "webpack --mode production"
}

现在你应该有一个 webpack.config.js 文件，它看起来像这样。

const path = require('path');
const webpack = require('webpack');

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = (env, argv) => {
    const {
        mode
    } = argv;
    return {
        module: {
            entry: path.join(__dirname, 'src', 'app.js'),
            watch: mode !== 'production',
            output: {
                path: path.join(__dirname, 'dist'),
                filename: mode === 'production' ? 'bundle.min.js' : 'bundle.js'
            },
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
            ],
            plugins: [
                new HtmlWebPackPlugin({
                    title: 'App',
                    template: "./src/index.html",
                    filename: "./index.html"
                })
            ]
        },
        devServer: {
            contentBase: path.join(__dirname, 'dist')
        }
    };
}

在你的 src 文件夹中有一个 app.js 文件，

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.less'

ReactDOM.render( <div> Hello from react! </div>, document.getElementById("app"));

使用npm start到运行开发版本。

希望这对您有所帮助。如果您遇到任何问题，请告诉我。我同意这是第一次乏味的工作。但它确实有助于运行具有特征的长期规模。

如何在 React 16.7 和 webpack 4.29 中使用 LESS？

How to use LESS in React 16.7 with webpack 4.29?

javascript

less

reactjs

webpack