Vue Cli3 Scss

Posted on  by admin

Add sass-loader and sass

Modified3 months ago. Just added the package normalize-scss to my new Vue project, but none of the styles are being applied.. I've tried both:. @import 'normalize-scss' in my styles.scss.

import 'normalize-scss' in my main.js page. Am I doing something wrong? The package is clearly there because the app runs, but it doesn't actually apply any css rules.

22 gold badges2020 silver badges4444 bronze badges. 4444 bronze badges. I figured it out. You need to put the normalize() after you import it, in your main.scss file.

Set up some global sass config for Vue 3:

22 gold badges2020 silver badges4444 bronze badges. 4444 bronze badges. after installing it with npm import it at the top of main.js file:.

If you have a main/global scss file you already use:.

PostCSS #

Add normalize.css (any of these) to your project: yarn add normalize.css (or npm). in your main.scss for example: @import '~normalize.css';.

Note the ~ for ambiguity as cli docs say: https://cli.vuejs.org/guide/css.html#referencing-assets.

See Sass globally set up in a (demo) vue 3 app

1111 gold badges4747 silver badges7979 bronze badges. 7979 bronze badges. Not sure if this is the correct way to do this but, if you are using vue-templates maybe you can try to import the style doing this:.