Vue.js proper vue-router styling

Question

I'm new to vue/webpack and I can't find a proper way to use scss files in a project that use vue-routing.

here is the project structure:

/src
  /routes
    route1.vue
    route1.js
    route2.vue
    route2.js
    ...
  /scss
    main.scss
    mixins.scss
    route1.scss
    route2.scss
    ...
  main.js
index.html

the code of route1.vue (and route2, except from the script src) is:

<template>
  <div id="header">
    <div class="title">{{title}}</div>
  </div>
</template>

<script src="./route1.js"></script>

<style lang="scss">
  @import "../scss/main";
</style>

the main.js manages the routing (as found on the tutorial)

When I run the project in dev mode by webpack, I've found that everytime I load a routing component, on the index page the tag style with all the contents of the main.scss is duplicated for each routing.

How can I avoid it?

Where should I put the scss import to include it on time only? Should I wrap the routing inside a top level component? (that seems quite complicated...)

Should I use a different approach? (I've used for a long time grunt/angular and maybe I'm trying to port a pattern that doesn't fit this tool...)

First of all make sure that you have proper Webpack loaders installed. Read this guide. Then use @import in one of .js files like main.js. Lastly add a link in your index.html to created style file. — ironcladgeek
– ironcladgeek, Commented Jul 12, 2017 at 17:30
thanks for the reply, actually I've asked this question after reading that guide, mostly because I didn't understand it and it doesn't give a full coverage of a pipeline working with a css preprocessor. About the second part of your message, with @import do you mean importing the scss resource in javascript? and about the index.html, where should the link point to? — Daniele P.
– Daniele P., Commented Jul 13, 2017 at 8:27

ironcladgeek · Accepted Answer · 2017-07-13 19:08:04Z

You need to install these modules/loaders:
- css-loader
- sass-loader
- node-sass
- extract-text-webpack-plugin
In webpack.config.js add these:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); before module.exports = {...}

then in rules[] define these two rules:

  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('css-loader')
  },
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('css-loader!sass-loader')
  }

then, after the end of module: {...} add this:

plugins: [
  new ExtractTextPlugin('style.css')
],

that's it for webpack configurations.

Now you have to write your scss rules in a file, let's say app.scss for example.

import that file by putting the import statement in one of your .js file, like main.js:

import 'path/to/app.scss'

Finally, you need to reference the stylesheet file in your index.html:

<link rel="stylesheet" href="/dist/style.css">

By now, When you build the project with webpack, it will translate your scss rules to css and put the stylesheet in dist/style.css

Hope you will find it informative. :)

Collectives™ on Stack Overflow

Vue.js proper vue-router styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related