CODEWITHSUNDEEP
webpackvue.jsvuejs2normalizevue-cli
sqlnoob
sqlnoob

Reputation: 119

How should i include css files in .vue files?

I'm using official vue-cli scaffolder and trying to include normalize.css in App.vue this way

<style scoped>
  @import "/node_modules/normalize.css/normalize.css";
  .app {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    max-width: 1000px;
    margin: auto;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
</style>

But after compiling css doesn't include in style tag or as external file:

enter image description here

So, how can I correctly include this or another css file?

Upvotes: 0

Views: 2269

Answers (1)

g-wilson
g-wilson

Reputation: 1276

Your style tag does not have a lang attribute, which implies that when the Vue components are bundled it will output a plain CSS file: no pre-processing.

When this happens it'll move your import statement and convert it to a plain CSS import.

To fix your code, you'll want to change your import URL to a relative path accessible to the web server. In your case, the path /node_modules is not mounted on the web server so it won't resolve the file. It's probably easier (and better practice) to either put normalize in a different style tag on the page (with HTTP2 this will not be a bottleneck), or use a pre-processor and import normalize into the same final output as your CSS.

If you want to use SASS/SCSS as a pre-processor (your syntax is valid SCSS already), then you'll want to define your styles like so:

<style lang="scss" scoped>

The Webpack vue-loader will support a number of languages, but you'll also need to add the correct Webpack loader for the pre-processor:

npm i --save-dev node-sass sass-loader

More information on the Vue Webpack loader with CSS can be found here

Upvotes: 1

Related Questions