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.

Solution 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();

Solution 2

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

import "normalize.css"

Solution 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

Comments

[Илья Зеленько]

It seems there is not so simple: github.com/JohnAlbin/normalize-scss#how-to-use-it

[Modermo]

This works for stylesheets that I've added manually, but not for this package.

[alliuca]

In my case I had to use import "~normalize.css"