Конфликт версий sass-loader затрудняет компиляцию файла .sass - PullRequest
Новая
       17

Конфликт версий sass-loader затрудняет компиляцию файла .sass

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

Я столкнулся с ошибкой в ​​моем проекте веб-пакета, которая не смогла скомпилировать my.sass файлы в течение 1 недели.

Я удалил package-lock.json и сделал npm i, затем я получаю это сообщение об ошибке:

npm WARN less-loader@2.2.3 requires a peer of less@^2.3.1 but none is installed. You must install peer dependencies yourself.

Проблема в том, что у меня есть зависимости "less": "^3.9.0" и "sass-loader": "^7.1.0", и мне нужна эта версия (потому что она последняя).

КогдаЯ пытаюсь npm run dev Я получаю это сообщение об ошибке: 

@ ./src/index.js 19:17-55
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/sass-loader/lib/loader.js??ref--7-2!src/pages/loginPage/components/loginForm/loginForm.scss:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/sass-loader/lib/loader.js??ref--7-2!src/pages/loginPage/components/signInForm/signInForm.scss:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/sass-loader/lib/loader.js??ref--7-2!src/pages/loginPage/loginPage.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/lib/loader.js?!./src/pages/loginPage/loginPage.scss] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/sass-loader/lib/loader.js??ref--7-2!./src/pages/loginPage/loginPage.scss 220 bytes {mini-css-extract-plugin} [built]

Обновил ли sass или sass-loader?У кого-то есть идея, в чем проблема?

Я не знаю, полезно это или нет, но вот мой webpack.config.js: 

const webpack = require("webpack");
const path = require("path");
const OptimizeCSSAssets = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


let config = {
    mode: 'development',
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "./bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        attrs: [':data-src']
                    }
                }
            },
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                    emitWarning: true
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                test: /\.s?css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
    ],
    devServer: {
        contentBase: path.resolve(__dirname, "./dist"),
        historyApiFallback: true,
        inline: true,
        open: true,
        hot: true
    },
    devtool: "eval-source-map"
}

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin(),
        new OptimizeCSSAssets()
    );
}

module.exports = config;
...