Question

我想在create-react-app中使用LESS预处理器。

React Code
ReactDOM.render(
    <form>
        <input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/" required title="Please enter value" required="required"/>
        <input type="submit"/>      
    </form>
    ,document.getElementById('root'))

index.less

body{
  background: red;
}

Answer 1

以下是我这样做的方式

你应该使用node-sass-chokidar npm包：

npm install node-sass-chokidar --save-dev

然后将以下内容添加到package.json中的npm脚本中：

"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"

观察者将在src子目录中找到每个Sass文件，并在其旁边创建相应的CSS文件。

请记住从源代码管理中删除所有css文件，并将src / ** / *。css添加到.gitignore。

最后，您可能希望使用npm start自动运行watch-css，并将build-css作为npm run build的一部分运行。为此，安装以下npm包，以便能够顺序执行两个脚本：

npm install --save-dev npm-run-all

然后将你的npm start和build.json文件中的脚本更改为以下内容：

   "scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

有关详细信息，请参阅此链接：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

Answer 2

到目前为止，使用reactjs app添加较少支持的最简单，最轻松的方法是使用custom-react-scripts和create-react-app来支持LESS / SASS / decorators：

安装：npm install -g create-react-app custom-react-scripts

创建应用： create-react-app <app_name> —scripts-version custom-react-scripts

示例少文件：

.myDiv{ background: gray; }

然后在你的组件中：

import lessStyles from '<less file path>';

<div style={lessStyles.myDiv}>
  ...
</div>

或常规方式：

import '<less file path>';

<div className="myDiv">
  ...
</div>

供参考：

https://github.com/kitze/custom-react-scripts

https://github.com/fawaz-ahmed/fawaz-ahmed.github.io

Answer 3

我遇到了类似的问题。只需在Webpack配置规则部分（taken from the official less loader examples）中包含以下行：

  {
    test: /\.less$/,
    use: [{
      loader: 'style-loader' // creates style nodes from JS strings
    }, {
      loader: 'css-loader' // translates CSS into CommonJS
    }, {
      loader: 'less-loader' // compiles Less to CSS
    }]
  },

当然，您需要将相应的包添加到package.json

中

然后在你的代码中只需导入所需的样式

import './style.less'

使用这种方法，您不会引入额外的步骤来创建其他css文件。

Answer 4

使用create-react-app 2，您可以使用“创建React App配置覆盖”（craco）和无痕的配置此功能：

设置疯子：

npm install @craco/craco

在package.json中：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

以更少的钱设置craco：

npm install craco-less

创建新文件：craco.config.js

module.exports = {
  plugins: [
    {
      plugin: require('craco-less'),
    },
  ],
};

如何在React Create-React-APP中使用LESS预处理器

4 个答案: