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
– Wouter Vandevelde, Commented Oct 24, 2017 at 10:06
see updated OP, tell me if knowing where I'm starting from helps. — tatsu
– tatsu, Commented Oct 24, 2017 at 10:07
SACC or SCSS files needs compiler, how will you compile them on runtime? — Abhishek Pandey
– Abhishek Pandey, Commented Oct 24, 2017 at 10:43

kano · Accepted Answer · 2017-10-24 18:15:13Z

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, 2017 at 18:15

answered Oct 24, 2017 at 13:45

kano

6,0073 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tatsu Over a year ago

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 : 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 Over a year ago

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?

kano Over a year ago

I edited my answer so it'd be easier to read than a comment (what with the syntax highlighting involved)

JP. Aulet · Accepted Answer · 2017-10-24 13:27:38Z

5

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!

answered Oct 24, 2017 at 13:27

JP. Aulet

4,4164 gold badges30 silver badges40 bronze badges

1 Comment

tatsu Over a year ago

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 : stackoverflow.com/questions/46914294/…

Collectives™ on Stack Overflow

Vue js and scss or Sass

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related