Глобально загрузите Sass / Scss в Vue Project - PullRequest
Новая
       44

Глобально загрузите Sass / Scss в Vue Project

2 голосов
/ 11 декабря 2019

Итак, когда я использовал Vue-cli 3.XI, я использовал метод, аналогичный This Thread , чтобы загружать мои многочисленные файлы стилей в глобальном масштабе.

Однако я обновился до Vue-cli 4.X и с тех пор не смогли использовать эту технику. Я просто получаю эту ошибку: 

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$grey-700".
        on line 8 of src/styles/global.scss
        from line 12 of /Users/kieranparker/Desktop/Personal/Side Projects/Dev/landingpages/src/App.vue
>>         color: $grey-700;

   ---------------^

По сути, все, что находится за пределами основных экранов (например, компоненты), просто не будет ничего захватывать в моем "_variables.scss". (Даже если я импортирую их все в один файл и использую это)

Есть предложения?

(Быстрое обновление) Я использую node-sass, и моя конфигурация выглядит так; 

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