How to include SCSS in vue.config.js for Vue CLI?

Question

Vue.js

Hi all!
Need help with styling. I'm building a project on vue cli (vue create...) Everything I've
tried doesn't work. The current files look like this:
vue.config.js

const path = require("path");

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

component content:
Error:

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;

That is, the view config did not pick up the styles.
This option didn't work either.

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

Also, there is a file with base styles in another folder ./src/assets/sass/base.scssthat collects imports of mixins and variables. I would like to connect it too, but no way.
When trying to import directly into a component, it
complains about the first import through the console. Yes, and in each component to connect variables is nonsense ...
Tell me, how to correctly connect styles globally?

Answer 1

VueJS: where is the best place to store css, in .vue components or main.css?

Answer 2

In fact, they are already preconfigured. The internal webpack config is configured to use them.
Do you have bootloaders installed?
npm install -D sass-loader node-sass