web-dev-qa-db-ja.com

React Create-React-APPでLESSプリプロセッサを使用する方法

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;
}
cssreactjslesscreate-react-app
8
Deep Patel

これが私がやっていることです

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ファイルを削除し、.gitignoreにsrc/**/*。cssを追加することを忘れないでください。

最後に、npm startでwatch-cssを自動的に実行し、npm run buildの一部としてbuild-cssを実行することができます。 2つのスクリプトを連続して実行できるようにするには、次のnpmパッケージをインストールします。

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

次に、package.jsonファイルのnpm起動スクリプトとビルドスクリプトを次のように変更します。

   "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

3
Inanda Menezes

Reactjsアプリのサポートを大幅に減らす最も簡単で痛みのない方法は、LESS/SASS/decoratorsのサポートにcustom-react-scriptsとcreate-react-appを使用することです。

インストール：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

1
Fawaz

同様の問題がありました。次の行をwebpack構成ルールセクションに追加するだけです（ 正式なlessローダーの例から引用 ）：

  {
    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ファイルを作成する追加の手順を導入することはありません。

0
Ihar

Create-react-app 2では、「Create React App Configuration Override」（craco）およびcraco-lessを使用してこれを構成できます。

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'),
    },
  ],
};
0
Marko Knöbl