Vue js and scss or Sass

Question

I'm more into refactoring so having style inside the same file as my html irks me.

I don't want to use <style> html tags filled with css that are intertwined with my functions & methods in every component.

I want to keep using sass or scss files. (a single file that is my own + bootstrap and other general purpose scss files that I pick up on the web).

how do I do this?

I've tried :

import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/scss/App.scss' <- this is the line I added that broke the app.

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

inside my main.js

but I got a 404 error :

UPDATE :

looked at this : What is the difference between linking stylesheets and requiring them in Webpack + VueJs? curious if I should switch to using a link? I tried it but I don't know where I should put it.

I should specify that I'm starting from this scaffolding : https://github.com/vuejs/vue-cli

SECOND UPDATE :

I've been following the guide at : https://medium.com/@mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9

Both work fine for me, can't reproduce :l (I also used the vue-cli) — Wouter Vandevelde, Oct 24 '17 at 10:06
see updated OP, tell me if knowing where I'm starting from helps. — tatsu, Oct 24 '17 at 10:07
SACC or SCSS files needs compiler, how will you compile them on runtime? — Abhishek Pandey, Oct 24 '17 at 10:43
I'm adding webpack as a compiler (I don't know the terminology, is webpack what you mean?) I'm having issue there as well. I'm making another post asking how to add webpack to a vue.js project. — tatsu, Oct 24 '17 at 12:35
Your import seems to be pretty fine. I guess the error lies in your webpack config. Did you set up a scss loader? — Aer0, Oct 24 '17 at 13:33

score 5 · Answer 1 · answered Oct 24 '17 at 13:27

Instead of importing it in the javascript part, switch it to import from css part... I know that you:

I don't want to use html tags.

But I assume that you mean that you want the compiled css instead of plain css. You can try this way:

<style lang="sass">
    @import '../assets/scss/App.scss';

    .others_css_classes {
      ...
    }
 </style>

And add in the build/wepack.base.conf.js config file the part:

{ 
   test: /\.scss$/, 
   loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] 
 },

It's a mix from the link you shared and I extracted a part of here

If you installed the Vue from vue-cli you should (automatically) have the webpack installed in the /build (if you used the official webpack template).

Hope it helps!

that sounds great the issue is the scaffolding's loader I linked does not start out handling scss files. how would I go about upgrading it? I have a stackoverflow for this here : https://stackoverflow.com/questions/46914294/how-to-add-webpack-3-8-1-to-a-vue-project — tatsu, Oct 24 '17 at 15:24

kano · Accepted Answer · 2017-10-24T18:15:13.547

5

There's a less popular (and for whatever reason not well documented) way to include a link in your single-file components:

</script>

<style src="./assets/scss/App.scss"></style>
<style>
  /* Your component styles go here */
</style>

Simple and effective, in my opinion! : )

Edit: I should mention that since Webpack has to load this file, then you should select the "Use Sass" option when setting up with vue-cli.

Edit 2: Steps to set up a project from scratch with built-in Sass/SCSS support:

In your directory where you'd like to place the new project, run: vue init webpack-simple your-dir-name
Follow through the prompts carefully and note that the fourth option (after author) asks "Use sass? (y/N)"
Type in y
Your project now has sass configured for webpack! :)

And if you forgot to do that for an existing project, you can cheat from here:

https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js

rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        'scss': 'vue-style-loader!css-loader!sass-loader',
        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
      }
    }
  },

edited Oct 24 '17 at 18:15

answered Oct 24 '17 at 13:45

kano

5,626
3
33
48

Soooo close!!!! Yes! I did forget to do that. and even with your helpful code it still does not load my scss. here's my build/webpack.base.conf.js : https://pastebin.com/GAgwR0Ha I've done a bunch of things to this end : my package.json got `"dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1", "node-sass": "^4.5.3", "sass-loader": "^3.2.3", "style-loader": "^0.19.0", "extract-text-webpack-plugin": "^3.0.1" }, "devDependencies": { "sinon": "^4.0.1", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.3", "vue-loader": "^13.3.0"` – tatsu Oct 24 '17 at 15:31
but your talk of a simple option during set up of "use sass" sounds amazing! I want that option. how do I start from scratch in a way that makes me encounter this prompt? – tatsu Oct 24 '17 at 15:33
I edited my answer so it'd be easier to read than a comment (what with the syntax highlighting involved) – kano Oct 24 '17 at 18:10

Vue js and scss or Sass

2 Answers2