Include 'normalize-scss' in Vue CLI 3

Question

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.

Answer 1

I figured it out. You need to put the normalize() after you import it, in your main.scss file. So:

@import 'normalize-scss';
@include normalize();

Answer 2

after installing it with npm import it at the top of main.js file:

import "normalize.css"

Answer 3

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

1. Add normalize.css (any of these) to your project: yarn add normalize.css (or npm)
2. 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

Answer 4

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:

<style lang="scss">
  @import 'src/assets/css/mycss_lib.css';
</style>

Also remember, do not use scoped in the style-tags. You also need, scss loader and node-sass to make this work.

Answer 5

1. npm install --save normalize-scss
2. In main scss file @import "normalize-scss/sass/normalize/import-now";