Vue-CLI importing global scss file

1
votes

I'm trying to populate an scss file for the Vue-cli project in App.vue which has been 

<style lang="scss">
  @import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i|Rubik:300,400,500,700,700i,900');
  @import "../node_modules/bootstrap/scss/bootstrap";
  @import "./assets/css/style";
</style>

From node modules bootstrap SCSS work properly, but it's not working when I kept style.scsson assets folder !

2
javascriptvue.jsvue-cli-3
any reason why you're importing the SCSS through <style> and not in <script> – A. L
So how can import scss file through a script ?and where I kept the script..... – Momin

2 Answers

0
votes

Import from your main.js file, like this:

import '@/assets/css/style';
0
votes

I have to need to create a vue.config.js file on Vue CLI 3+ main directory, which has to contain the following code snippet

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