Как загрузить файл _variables.scss для всех компонентов Vue с помощью sass-resource-loader в Vue CLI 3.04?

Question

У меня есть свежий каркас проекта VueJs, использующий Vue CLI 3.0.4. Я хочу использовать переменные SCSS во всех компонентах без необходимости импортировать _variables.scss во все компоненты.Я хочу импортировать _variables.scss и обнаружил, что это можно сделать с помощью sass-resource-loader.Я посмотрел на все ответы здесь, и все они устарели, так как они не работают с vue-loader 15.

Так внутри vue.config.js у меня есть следующее:

var path = require('path');
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('sass')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: [
          path.resolve('./src/scss/config/_variables.scss'),
        ]
      })
  }
}

Когда я запускаю это, я получаю следующую ошибку:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
        ^
      Undefined variable: "$brand-color".
      in C:\dev\git\vue-typescript-test\src\components\HelloWorld.vue (line 60, column 10)

Переменная $ brand-color используется в компоненте Helloworld.vue, поэтому она содержит переменные, которые не добавляются.

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

Также я хочу отметить, что я следовал выбранному ответуздесь: Vue CLI 3 sass-resources-loader - Options.loaders undefined

Любая помощь с благодарностью.

Спасибо!

Answer 1

Это должно работать с использованием следующего фрагмента кода.

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

Обратите внимание, что @ - это ярлык для доступа к папке src.

---

Don 'Также не забудьте установить node-sass и sass-loader.

npm install --save-dev node-sass sass-loader

Наконец, добавьте атрибут lang к своим тегам style.

<style lang="scss">

// some style...

</style>