How to elegantly use sass in Vue projects

Before starting, please make sure you have a webpack template-based project (vue-cli scaffolding one-click installation~)

1. Open the project terminal and install the dependencies of sass

npm install --save-dev sass-loader
//sass-loader depends on node-sass
npm install --save-dev node-sass

2. Add the following configuration to the rules of webpack.base.conf.js in the build folder

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

3. Modify the style tag in the component

<style lang="scss">

Then, then, then you can happily write sass in Vue~