vue-cli 3.0 integrated sass / scss to vue project

If no CSS pre-processor to create a project, we can also install sass-loader node-sass manually integrated scss.

npm install -D sass-loader node-sass

This can be used when installing in the assembly scssof.

<style scoped lang="scss">
.wrap {
    h1{
        color:blue;
    }
}
</style>

Global variables introduced SCSS

_variable.scss

$color-theme:#498eff;

If you want to use scssvariables, need to make the following changes to the configuration file

vue service clie will automatically use sass-loader we install as a loader scss content. vue cli is based webpack build the project, if you want to pass some configuration items to sass-loader, you can configure the vue.config.js. In the root directory of the project to create if not found vue.config.js, manually. as follows:

// vue.config.js
const fs = require('fs')
module.exports = {
  css: {
    loaderOptions: {
      sass: {
            prependData: `@import "~@/assets/scss/_variable.scss";`
            } 
         } 
      } 
}

This file variables.scss also be introduced in the assembly in .vue through import.

Finished modifying the configuration file remember to restart next project, then you can use scssvariables, functions, and so the function.

<style scoped lang="scss">
.wrap {
    h1{
        color:$color-theme;
    }
}
</style>