Проблема с загрузчиком Sass в заброшенном, но работающем проекте Vue

Question

Парень, который сделал этот интерфейс Vue, покинул компанию, и я застрял, обновляя Webpack с 2 до 4. Я не понимаю, где находятся конфиги Sass, независимо от того, сколько раз и фраз я ack , Если я определю набор правил для Sass и CSS в базовом конфигурационном файле веб-пакета, например:

{
rule: /\.scss./.
use: [
    loader: "sass-loader", "vue-style-loader", "style-loader", "css-loader", "postcss-loader"
]
}

Генерирует около 68 ошибок для каждого загрузчика. Я погуглил это, ошибки, которые это генерирует, которые являются различными, связаны с фактом, что набор правил был определен дважды. Но ack не показывает такую ​​вещь, и, плюс, если я удаляю их, я получаю эту ошибку примерно 68 раз:

You may need an appropriate loader to handle this file type.

В чем может быть проблема? Я использую node-sass вместе с sass-загрузчиком.

Answer 1

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

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};

В дополнение, как показывает опыт, может быть, стоит потратить время на использование vue-cli-3 и начать все с нуля.Просто создайте проект по умолчанию с помощью vue-cli-3 и начните переносить в него свой код.По умолчанию он будет обрабатывать все загрузчики, а также устранять шаблонную конфигурацию для тестирования, сборки, анализа и отладки.Тогда ваш код конфигурации даже не понадобится:)