[Vuejs]-Design: Two Vue Components That Share Similar Sass

Maybe became useful for you to use a module rule at the webpack.config for sass, where all vue components will share the same archive or variable (you choose!);

Explaining better

First, you must have the sass-loader in your app.
To know if you already have it at your application, check out your package.json and search for it. If you haven’t… run: npm install -D sass-loader.

Now that you have it, you can set the following configuration at your webpack.config.js:

module: {
        rules: [
          // ... other rules omitted
   
          {
            test: /\.scss$/,
            use: [
              {
                loader: 'sass-loader',
                options: {
                  additionalData: `@import "resources/css/sass/_variables.scss";`
                }
              }
            ]
          }
        ]
      },

Everything that you put in additionalData is like if you were adding to all Vue Components. It should work fine.

But I don’t have a webpack.config.js…

So, if you don’t, don’t worry. It will be your issue if you started the project using the @vue/cli.

1. Create a file at the root of your vue project called vue.config.js;
2. Paste inside of it the following code:

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      // @/ is an alias to src/
      // so this assumes you have a file named `src/variables.sass`
      // Note: this option is named as "prependData" in sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },


      scss: {
        additionalData: `@import "~@/variables.scss";`
      },


      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

There is 3 different options: scss, sass and less. You choose one more convenient for you and delete the others.

I hope to have helped you!