How to write scss in .vue file?

Method: First install the [node-sass and sass-loader] dependencies; then open the [webpack.base.conf.js] file and add scss rules in the rule; finally in [

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

Using scss in vue projects

1. First install dependencies

npm install node-sass sass-loader --save-dev

2. Find webpack.base.conf.js in build, and add scssrules to rules

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

3. Use

<style>
</style>

in the vue file to introduce scss into the vue project globally

1. Global reference You need to install sass-resources-loader

npm install sass-resources-loader --save-dev

2. Modify utils.js## in build

#Change

scss: generateLoaders('sass')

to

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/style/common.scss')
    }
  }
)

Related recommendations:

2020 Summary of front-end vue interview questions (With answers)

vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020

More programming-related knowledge, Please visit:

Introduction to Programming! !

The above is the detailed content of How to write scss in .vue file?. For more information, please follow other related articles on the PHP Chinese website!