Как добавить загрузчик sass для node_modules в vue.config.js

Я пытаюсь использовать загрузчик sass для модулей узлов. Но независимо от того, что я пытаюсь, возникает следующая ошибка:

SassError: не удается найти таблицу стилей для импорта.

Мой vue.config.js выглядит так:

module.exports = {
    css: {
        sourceMap: true,
        loaderOptions: {
            scss: {
                prependData: `
          @import "~@/my-node-module/theme/engine.scss"; 
        `
            }
        }
    },
};

webpack vue.js sass vue-cli sass-loader
person Dasma    schedule 21.04.2020    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Попробуйте это из документов:

@import "~my-node-module/theme/engine.scss";

~ сообщает Webpack, что путь импорта не является относительным путем.

@ — это псевдоним Vue CLI 3+ для каталога src.

Таким образом, ~@ по существу совпадает с @. В любом случае, Webpack знает, что путь не является относительным, и проверяет каталог src и не находит модуль узла.

Сам по себе ~ заставляет Webpack искать в другом месте, обычно node_modules.

Файл проекта .scss

Например, если у вас есть ресурс .scss в каталоге src > assets > scss, вы можете сделать это:

@import '@/assets/scss/variables.scss';

Или это:

@import '~@/assets/scss/variables.scss';

Или даже это:

@import '~/../src/assets/scss/variables.scss';
person Dan    schedule 21.04.2020