Стиль LESS не применяется к реагирующему компоненту в приложении Reaction + Webpack - PullRequest
Новая
       12

Стиль LESS не применяется к реагирующему компоненту в приложении Reaction + Webpack

2 голосов
/ 05 июля 2019

В приложении React + Web Pack я пытаюсь стилизовать свой компонент реагирования, используя LESS, но стиль не применяется, хотя я не получаю ошибок, поэтому я не знаю, где искать.Конечно, мои devDependencies включают меньше, меньше загрузчик, CSS-загрузчик и загрузчик стилей.

webpack.config.js 

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

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
             {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    "babel-loader",
                    "eslint-loader"
                ]
            },
            {
                test: /\.(c|le)ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
            "@components": path.resolve(__dirname, "src/components"),
            "@containers": path.resolve(__dirname, "src/containers")
        }
    },
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
      ],
    devServer: {
        contentBase: './dist',
        hot: true
    }
};

компоненты / App / App.jsx 

import React from "react";
import Body from "@components/Body/Body.jsx";
import Footer from "@components/Footer/Footer.jsx";

import styles from "./App.less";

class App extends React.Component {

    render() {

        return <div className={styles.root}>
            <h1> test </h1>
            <Body />
            <Footer />
        </div>;
    }
}

export default App;

components / App / App.less 

.root {
    width: 100%;
    height: 100%;
    background-color: coral;

    h1 {
        margin-top: 200px;
        color: red;
    }
}

Я ожидал увидеть примененный стиль, но это не так.

Ответы [ 2 ]

2 голосов
/ 05 июля 2019

Мне пришлось включить Модули CSS в конфигурации Webpack: 

{
    test: /\.(c|le)ss$/,
    use: [
        "style-loader",
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: "[path][name]__[local]--[hash:base64:5]",
            },
        },
        "less-loader"
    ]
},
1 голос
/ 05 июля 2019

Попробуйте установить "root" в качестве строкового значения на className.

При настройке вашего веб-пакета содержимое LESS-файлов не будет экспортироваться в виде css-правил, а будет собрано только для визуализации в style -тег.

Вам необходимо импортировать файл less, чтобы веб-пакет знал, какие файлы следует учитывать, но вы не можете получить доступ к его правилам или стилям. Чтобы заставить его работать, вы просто устанавливаете имена CSS-классов так, чтобы скомпилированные CSS-правила совпадали.

...