Importing Style Files to Component Style Tags in Vue.js

#css #vue

Part four in a series of articles about working with CSS in Vue.js, discussing different ways of importing separate style files to .vue file style tags.

The examples are using SCSS. To read more about adding SCSS support to a Vue.js project, see the article ”Working with CSS in Vue.js”.

Importing Global Styles in Component Style Tags

Adding an automatic import of a file instead of repeating the same import in all of your component files can save time and effort.

Note that the code in the imported file should be such that it is only output when used (like scss mixins and scss variables). This is because it will be added to each component’s CSS when imported.

In earlier versions of Vue.js, a plugin called style-resources-loader was needed for this to work.

An Example Setup
In the src folder, add a new folder for your styles. Add any other SCSS files you want to use. An example might look like this:

Remember to import everything (mixins, variables) you want to distribute in your global.scss file:

@import './mixins/mixins';
@import 'variables';

Add the following code to your vue.config.js file, to link to your global.scss file:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        data: `@import "~@/styles/global.scss";`
      }
    }
  }
}

In the file Component.vue style tag, you should now be able to use the styles defined in all of the files accessed in global.scss:

<style lang="scss">
.testclass{
  p{
    color: $primary;
    /* variable declared in src/styles/_variables.scss */
    @include fontSizePX(24);
    /* mixin declared in src/styles/mixins/_mixins.scss */
  }
}
</style>

Note:
Vue CLI v3 works with sass-loader v7 only at the moment. You can downgrade it for now by uninstalling sass-loader and installing the latest v7 version. To do this, run npm uninstall sass-loader and npm i --save-dev sass-loader@7.3.1.

Read more about this in the Vue CLI GitHub Issues.

With Vue CLI v4+ and sass-loader v8+, data will be renamed prependData in the vue.config.js file.

:src Imports

Another way of importing styles from a separate file is to write a src declaration in the style tag, referencing the style file you want to use.

For example you have a separate style file, Tipp.scss:

.tipp{
    text-transform: uppercase;
}

And a component file, Tipp.vue:

<template>
    <div class="tipp">
        <h2>Hello Tipp</h2>
        <!-- will be in uppercase -->
    </div>
</template>

<style src="./Tipp.scss" lang="scss">

</style>

This is handy if you want to keep your component styles in a separate file. It is also possible to put the component js code in a separate file and add it in the same way to the script tag in the .vue file.

When experimenting with this, it seemed like any additional styles declared within the component style tag were ignored. So the only styles active were the ones in the linked file. If I did a normal import inside the same style tag, as described in the following section, those styles did however work.

Normal SCSS Imports

Using normal import declarations for external style files work as well. In the file global-ui.scss:

.green{
    color: green;
}

$global-ui-darkred: rgb(136, 2, 2);

In Component.vue:

<template>
  <div class="darkred">
    <p class="green">I get style from file global-ui.scss imported</p>
    <!-- class declared in the imported file -->
  </div>
</template>

<style lang="scss">
@import "./src/styles/global-ui.scss";

.darkred {
  background-color:$global-ui-darkred;
  /*SCSS variable from the imported file*/
}
</style>

Setup

The starting code for this article is created by the Vue CLI command tool version 3.3.0 and Vue.js version 2.6.10. Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.