Как использовать LESS в React 16.7 с веб-пакетом 4.29? - PullRequest
Новая
       18

Как использовать LESS в React 16.7 с веб-пакетом 4.29?

0 голосов
/ 19 марта 2019

Я только начинаю изучать React, и я хочу использовать меньше в React.Я провел некоторое исследование по этому поводу, и они сказали, что я должен написать конфигурацию в webpack.config.dev.js, но после запуска npm run eject я получил только один файл: webpack.config.js.

Я думаю, возможно, это потому, что обновление, новая версия может объединять webpack.config.dev.js и webpack.config.prod.js в `webpack.config.js.

и япроверил домашнюю страницу веб-пакета, там написано: 

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

но я не знаю, куда вставить этот код.Я не нашел подобного кода. Поэтому я хочу простой пример того, как поддерживать меньше в React.

Спасибо.

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Вы должны сделать следующие шаги после извлечения, чтобы использовать меньше в реакции 

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

Тогда вам будет хорошо идти, не стесняйтесь спрашивать разъяснения, если таковые имеются

0 голосов
/ 19 марта 2019

Я полагаю, вы используете стартовый комплект create-реагировать на приложение.Что ж, это хорошо, но если вы хотите добавить больше функций в свои настройки, стартовые наборы идут со своими сложностями.

Вы можете научиться настраивать реакцию вместо того, чтобы позволить стартовому набору обрабатывать его для вас.

В любом случае вы можете попробовать это,

Вам понадобятся зависимости вавилона для обработки транспиляции:

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 / менее файлов.При этом будут загружены все загрузчики, необходимые для css и менее. 

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

Теперь вам понадобится плагин HTML и файл шаблона .html для веб-пакета, чтобы он служил вашей реакции. 

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>

Теперь вам понадобится веб-пакет 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')
        }
    };
}

И файл app.js в вашей папке src, например, 

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 для запуска версии dev.

Надеюсь, это поможет.Дайте мне знать, если у вас возникнут какие-либо проблемы.Я согласен, что это утомительная работа в первый раз.Но в конечном итоге это помогает масштабировать функции.

...