15

Automatically Import SASS/SCSS Into Every Vue.js Component

 3 years ago
source link: https://dzone.com/articles/automatically-import-sass-scss-into-every-vuejs-component
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Automatically Import SASS/SCSS Into Every Vue.js Component

EDIT IN PROGRESS // Have you ever wanted to import SCSS files into every Vue.js component automatically? This article will show you how to do so with Vue CLI 4, 3, and 2.

Oct. 27, 21 · Web Dev Zone · Tutorial

Join the DZone community and get the full member experience.

Join For Free

If you’ve done any work with Vue.js and SASS (or SCSS from here on), you may have run into this very common issue: you have SCSS variables in one file that you want to make available to your Vue components.

The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue’s single-file components, you can simply add lang="scss" to the <style> block (docs).

The bad news is in order to use your sweet sassy variables (or mixins and functions), you have to manually @import them into each component’s style block. As your application grows, you will soon realize how painful this process is.

JavaScript 
<style lang="scss">
@import '@/path/to/variables.scss'

/** ... */
</style>

Wouldn’t it be nice if you could just provide those functional SCSS files globally without having to manually import them? Good news, you can!

Vue CLI 4

  • Create a file called vue.config.js (if you do not already have one)
  • Add the following lines:
JavaScript 
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/_shared.scss";`,
      },
    },
  },
};

Note that if you are upgrading a project from Vue CLI 3, then you may run into the issue:

JavaScript 
Sass Loader has been initialised using an options object that does not match the API schema.

In which case, you may have an outdated config file. See the next section for Vue CLI 3 regarding the sass-loader versions.

Vue CLI 3

  • Create a file called vue.config.js (if you do not already have one)
  • Add the following lines:
JavaScript 
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/_shared.scss";`,
      },
    },
  },
};

Update: If you have upgraded sass-loader, you may run into an issue:

JavaScript 
Sass Loader has been initialised using an options object that does not match the API schema.

The solution is to replace data in the options above with prependData for version 8, and additionalData for version 9.

Vue CLI 2

  • Open the file called /build/utils.js
  • Find the line containing scss: generateLoaders('sass')
  • Replace it with the following:
JavaScript 
scss: generateLoaders("sass").concat({
  loader: "sass-resources-loader",
  options: {
    resources: path.resolve(__dirname, "./src/_shared.scss")
  }
})

Things to Keep in Mind

Both methods above assume you are storing your shared Sass in a file at /src/_shared.scss. If your project uses a different file name or folder, adjust accordingly.

These files will be imported and available to every component you write, which is great for things like variables, functions, or mixins, but you should avoid any actual CSS rules. Adding CSS rules to your shared Sass files will import those rules into every component and bloat your project. For global CSS rules, create a separate file and import it into your main App.vue file instead.

Thank you so much for reading. If you liked this article, please share it, and if you want to know when I publish more articles, follow me on Twitter. Cheers!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK