How can I import global scss file in Vue?

[Jancat]

❔ Question

I'm building a Vue.js application and installed node-sass devDependency already.

I want to import global scss file(main.scss) in main.ts and all .vue component can use the global style directly. But it not works in the below code.

The main.ts file:

import Vue from 'vue'
import './styles/main.scss'   // import global app style file
import router from '@/router'
import App from '@/App.vue'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
// I had to import main scss file in every .vue component. Otherwise the `$vue-green` is undefined when bunddling.
@import './styles/main';

// the #app class hadn't apply to the root div element?
#app {
  font-family: '-apple-system', 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background-color: $vue-green;
}
</style>

/styles/main.scss

@import 'variables';   // ./variables.scss defined the $vue-green

problem:

1. The main.scss hadn't been injected to the .vue component.
2. The #app style hadn't been applied to <div id="app"> root element.

🔦 Context

How to import scss into Vue application properly?

🌍 Your Environment

Software	Version(s)
Parcel	1.9.4
Node	10.5.0
npm/Yarn	Yarn
Operating System	Mac OS

[DeMoorJasper]

That will not inject it, it’ll create a new css bundle that would be added to an index.html if thats the entrypoint

_{Sent with GitHawk}

[Jancat]

Is there a way to import global scss style like webpack sass-resources-loader?

And do you have any ideas for problem 2 above? Is it may be a bug? @DeMoorJasper

Thanks.

[DeMoorJasper]

@Jancat If I understand correctly than the sass-ressources-loader is basically just sass-node but for webpack and we support every sass feature so I guess we support it...

Not sure why that isn't working probably a good idea to dive into the output folder and see for yourself why it isn't working, some debugging from your side would definitely help. I can't guess what's going wrong

[Jancat]

@DeMoorJasper Sorry, the problem 2 is the reason that I forgot to add postcss-modules dependency.

For problem 1:

Since Parcel base on node-sass to support sass feature, why the App.vue can't use style that import from main.ts? Now I had to @import './styles/main'; in my every vue component that need to use main scss style.

[caiotarifa]

A few months passed. Is there a solution?

I bring an example of how it is done in the Webpack.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
      }
    }
  }
};

[gregorybolkenstijn]

+1

[mjoct]

Place it inside your main.js

[Dagge1]

it still doesn't work. I want to include Bootstrap scss and it simply doesn't work, I have tried countless combinations. You guys should stop announcing that parcel is a zero-config thing, because it is not. I'm going back to webpack

[Neefay]

This one was a bit of a blow to my initial Parcel excitement, but I'm sure we'll see an implementation soon.

EDIT: After looking around for a bit, this solution has worked wonders for me.

Just add .sassrc.js to your project root folder and link it with your entry point. Parcel Magic® takes care of the rest.

.sassrc.js

module.exports = { data: '@import "./src/styles";' };

[danieltian]

Is there any way of doing the same with Stylus? This is the last thing I need to get working in Parcel before I can switch to it wholesale, because I need the ability to globally import my mixins and variables into every file. This is the webpack loader config I'm trying to reproduce:

{
  test: /\.styl(us)?$/,
  use: 'vue-style-loader', 'css-loader', {
    loader: 'stylus-loader',
    options: {
      import: [
        path.resolve(__dirname, 'src', 'mixins.styl'),
        path.resolve(__dirname, 'src', 'colors.styl'),
        path.resolve(__dirname, 'src', 'variables.styl')
      ]
    }
  }
}

[SonyaOrlova]

.sassrc.js to your project root folder and link it with your entry point

@Neefay hi! what do you mean "link with your entry point"?

[zuavra]

@Neefay .sassrc.js did not work for me, but I got it to work by loading the main SCSS file in index.html:

<head>
    <link rel="stylesheet" href="./css/index.scss">
</head>

From there you can @import './global/variables.scss and @import './components/app.scss and so on.

It's a pity that you can't load .scss files from .vue files since I would have liked to make them scoped, but at least this is working.

Edit: I should also mention I had to use node-sass, since with sass it was not hot-reloading the .scss files when modified.

[cjones26]

This one was a bit of a blow to my initial Parcel excitement, but I'm sure we'll see an implementation soon.

EDIT: After looking around for a bit, this solution has worked wonders for me.

Just add .sassrc.js to your project root folder and link it with your entry point. Parcel Magic® takes care of the rest.

.sassrc.js

module.exports = { data: '@import "./src/styles";' };

I have tried a multitude of things, but this was something which actually worked. Thank you, @Neefay!!