CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Engazan
Engazan

Reputation: 33

Vue JS import global SCSS styles if there is already SASS style

As you can see in config file I'm importing global SCSS file, but when I run npm run serve it fails because I'm using Vuetify and it is using SASS. Is there way to do it? Or do I have to import SCSS every time I make new component ? Like in old times?

I tried: 

data: `@import "@/styles/global.scss"
       @import "@/styles/_variables.scss"`

also 

data: `@import "@/styles/global.scss"`

vue.config.js file:

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'sk',
      fallbackLocale: 'sk',
      localeDir: 'locales',
      enableInSFC: false
    }
  },
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/global.scss";`
      }
    }
  }
};

Upvotes: 1

Views: 1579

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4769

You definitely should use style-resources-loader.

This loader is a CSS processor resources loader for webpack, which injects your style resources (e.g. variables / mixins) into multiple imported css / sass / scss / less / stylus modules.

Vue CLI Automatic imports.

You can also use the vue-cli-plugin-style-resources-loader.

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'patterns': [
        path.resolve(__dirname, 'src/styles/_variables.scss'),
      ]
    }
  }
}

Upvotes: 1

Related Questions