-1

  вот мой webpack.config.js

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

const htmlPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
});

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }


        ]
    },
    plugins: [htmlPlugin]
};

а вот package.json

{
  "name": "german_react",
  "version": "1.0.0",
  "private": true,
  "description": "test",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [
    "react"
  ],
  "author": "German Varanytsya",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.7.1",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

я добавлял что-то типа этих настроек но выводило эрор...

    {
        test: /\.less$/,
        use: [
            {
                loader: "style-loader"
            },
            {
                loader: "css-loader",
                options: {
                    sourceMap: true,
                    modules: true,
                    localIdentName: "[local]___[hash:base64:5]"
                }
            },
            {
                loader: "less-loader"
            }
        ]
    }

Помогите пожалуйста, может кто-то может это решить либо же скинуть хотя бы пример как это работает в webpack 4 я не могу найти информацию четко по "Webpack 4 LESS to CSS compile"... лучше конечно же решить Заранее спасибо!

2

1 ответ 1

2

less-loader не имеет никакого отношения к версии webpack. Вот рабочая конфигурация для webpack >= 4, из пакетов нужно только webpack, webpack-cli, less, less-loader, style-loader, css-loader

// webpack.config.js

module.exports = {
    context: __dirname,

    entry: './app.js',

    output: {
        filename: '[name].js',
        pathinfo: true
    },

    target: 'web',

    mode: 'development',

    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader'
            }, {
                loader: 'less-loader'
            }]
        }]
    }
};

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.