Как использовать пути включения с Vue CLI при попытке импортировать sass-модули? - PullRequest
Новая
       42

Как использовать пути включения с Vue CLI при попытке импортировать sass-модули?

1 голос
/ 23 мая 2019

Я начинаю новый проект, используя Vue CLI, и я впервые использую его.

Я использую CSS-фреймворк (Spectre), который я установил через NPM. Я сейчас пытаюсь импортировать только его части. Я нашел способ заставить его работать, но он довольно громоздкий, и я хотел бы найти лучший способ, используя опцию includePaths.

По сути, все можно обобщить так: у меня есть файл *.scss, который выглядит следующим образом: 

@import "./node_modules/spectre.css/src/accordions";
@import "./node_modules/spectre.css/src/avatars";
@import "./node_modules/spectre.css/src/badges";
@import "./node_modules/spectre.css/src/breadcrumbs";
...

и я, очевидно, хочу упростить его, удалив часть ./node_modules/spectre.css/src/ из всего импорта.

В vue.config.js вот что у меня есть: 

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        includePaths: [path.resolve(__dirname, 'node_modules/spectre.css/src')]
} } } }

Но это не работает.

Я посмотрел на следующие вопросы:

Но не смог найти ответ или не смог его найти.

1 Ответ

0 голосов
/ 24 мая 2019

Правила преобразования URL в проектах Vue CLI позволяют использовать ~ в качестве псевдонима пути для node_modules/ проекта, поэтому вы можете сделать: 

@import "~spectre.css/src/accordions";
@import "~spectre.css/src/avatars";
@import "~spectre.css/src/badges";
@import "~spectre.css/src/breadcrumbs";

Без измененийнеобходим ваш Vue config.

...