How to use SASS / SCSS with latest vue-cli starter project?

webpack sass vue.js vuejs2 vue-component
CommonSenseCode picture CommonSenseCode · May 17, 2017 · Viewed 29.7k times · Source

I need to use SASS or SCSS in my project.

I used the vue-cli to make the latest version of a starter project.

Anyone had any success in making sass/scss work in the newest starter project with webpack?

Answer

Linus Borg picture Linus Borg · May 17, 2017

  1. you install the necessary dependencies

    npm install -D node-sass sass-loader

  2. for global styles, simply import the file into main.js:

    import './styles/my-styles.scss'

  3. in .vue files, add the lang to the <style> element.

    <style lang="scss">

If using webstorm:

<style lang="scss" rel="stylesheet/scss">

Related questions

Vue CLI CSS pre-processor option: dart-sass VS node-sass?

When creating a new project with CLI (v3.7.0), there is an option to choose between dart-sass or node-sass compiler. How do these compare to each other, to be more specific than declared in Vue docs? A Tip on Sass Performance …

Read More
How do I use /deep/ or >>> in Vue.js?

So, I've read here that in Vue.js, you can use /deep/ or >>> in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in my …

Read More
Invalid CSS after " ": expected 1 selector or at-rule, was "{"

I am trying out Vue with SASS but I run into a problem ben using npm run build. I use webpack sass-loader. Can anyone help me out here? I suspect the problem is somewhere in my webpack config, but I …

Read More