Как подключить SCSS во vue.config.js для Vue CLI?

Question

[Andrej Sharapov]

Привет всем!
Нужна помощь с подключением стилей. Собираю проект на vue cli (vue create...)

Что только не перепробовал, не работает. Текущие файлы выглядят так:

vue.config.js

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "sass",
      patterns: [path.resolve(__dirname, "./src/assets/sass/utils/*.scss")] //- здесь ресет, переменные и миксины
    }
  }
};

содержимое компонентов:


Ошибка:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$white".
        on line 26 of D:\Development\Vue-cli\next-po\src\components\Footer.vue
>>   color: $white;

То есть, вью конфиг не подцепил стили.

Этот вариант тоже не сработал

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/assets/sass/base.scss";`
      }
    }
  }
};

Так же, есть файл с базовыми стилями в другой папке ./src/assets/sass/base.scss, который собирает импорты миксинов и переменных. Хотелось бы его тоже подключить, но ни как.

При попытке импорта напрямую в компонент, через

консоль ругается на первый импорт. Да и в каждом компоненте подключать переменные это бред...

Подскажите, как правильно подключить стили глобально?

Answer 1

[Сергей delphinpro]

VueJS: где лучше хранить css, в компонентах .vue или main.css?

Comments

[Andrej Sharapov]

пытался сделать нечто подобное, но пока теряю связь между файлами, поэтому оставил эту затею. не хотелось бы бездумно повторять. в ближайшее время постараюсь изучить. спасибо за пример.

[Сергей delphinpro]

Andrej Sharapov, Касательно вашего вопроса просто подключите некий файлик

module.exports = {
    //...
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/all.scss";`,
            },
        },
    },
};

и в этом файле подключите все нужные миксины и переменные. Они будут доступны во всех компонентах вью.

[Andrej Sharapov]

Сергей delphinpro, у меня таким выступает base.scss. Он импортирует все utils и содержит базовые стили. Пытался по всякому, вылезали ошибки разные, но сейчас все работает. Только остался один вопрос. Помимо этого базового файла, я добавил в конфиг еще два: для сайдбара и шапки. Они не изменны и содержат только стили для указанных модулей. Тоже являются, как бы, глобальными для всего проекта.

prependData: `
          @import "~@/assets/sass/base.scss";
          @import "~@/assets/sass/modules/aside.scss";
          @import "~@/assets/sass/modules/header.scss";

Подскажите. Они же ни где не будут дублироваться/наследоваться в другие файлы? И наверное, будет лучше засунуть их в базовый файл, а не разбивать?

[Сергей delphinpro]

Andrej Sharapov, не будут. Но лично мне удобнее подключать один файл в конфиге вью, а уже в нем все остальное, что нужно.

Answer 2

[Александр Буки]

По сути они уже преднастроены. Внутренняя конфигурация webpack настроена для их использования.
У вас установлены загрузчики?
npm install -D sass-loader node-sass

Comments

[Andrej Sharapov]

да, при создании проекта через vue cli выбрал их сразу.

В процессе работы дополнил и теперь package выглядит так:

"dependencies": {
    "axios": "^0.19.0",
    "core-js": "^3.4.3",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "pug": "^2.0.4",
    "pug-plain-loader": "^1.0.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "style-resources-loader": "^1.3.2",
    "vue-template-compiler": "^2.6.10"
  },

[Михаил]

Andrej Sharapov, vue inspect и гляньте что там у лоадеров

[Andrej Sharapov]

Михаил, да вроде все норм

поковырялся немного, сделал так:

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/assets/sass/base.scss";`
      }
    }
  }
};

base.scss

@import 'utils/reset';
@import 'utils/mixins';

@import 'modules/aside';
@import 'modules/header';

Работает нормально, но теперь вопрос. Не будет ли такое использование проблемой в дальнейшем? Или лучше вынести все во vue.config.js?

[Михаил]

Andrej Sharapov, ко всем стилям теперь будет подключаться

@import 'modules/aside';
@import 'modules/header';

[Andrej Sharapov]

Михаил, значит их лучше добавить в конфиг вью, рядом с базовым? я просто не до конца улавливаю логику данного конфига. Если я правильно понимаю, файлы, указанные в нем, будут работать на все приложение и не будут дублироваться во все компоненты и файлы?

[Михаил]

Andrej Sharapov,

Так же, есть файл с базовыми стилями в другой папке ./src/assets/sass/base.scss, который собирает импорты миксинов и переменных. Хотелось бы его тоже подключить, но ни как.

модули там зачем?

[Andrej Sharapov]

Михаил, уже исправляю. просто не нашел другого решения))

[Andrej Sharapov]

Михаил,

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "~@/assets/sass/base.scss";
          @import "~@/assets/sass/modules/aside.scss";
          @import "~@/assets/sass/modules/header.scss";
          `
      }
    }
  }
};

и базовый теперь такой:

@import 'utils/reset';
@import 'utils/mixins';
//- и другие базовые стили

[Михаил]

Andrej Sharapov,

Prepends Sass/SCSS code before the actual entry file. In this case, the sass-loader will not override the data option but just append the entry's content.

This is especially useful when some of your Sass variables depend on the environment:

К КАЖДОМУ (насколько я помню) файлу стилей

Answer 3

[profesor08]

Там все уже за тебя сделано, настроено и работает.

<style lang="scss">
$color: red;

.link {
  color: $color;
}
</style>

Что же касается инжекта файлов в компоненты, то есть два пути. Вручную и вот так:

const vueConfig = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/scss/layout/_functions.scss";
          @import "@/assets/scss/layout/_mixins.scss";
        `,
      },
    },
  },
};

А то, что у тебя ругается на первый импорт, это значит ты указал кривой путь для этого импорта.

В любом случае подобный инжект сильно сказывается на производительности во время разработки. Наиболее комфортным выходом будет вынос стилей из компонентов отдельно.

Comments

[Andrej Sharapov]

Серьезно, профессор?
А вы в каждый компонент заново добавляете переменные и токсины?

[profesor08]

Andrej Sharapov, читай развернутый ответ.