How to write scss in .vue file?-Vue.js-php.cn

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 [ 】Write the scss style in the tag.

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 Copy after login 2. Find webpack.base.conf.js in build , and add scss rules to rules

{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] } Copy after login 3. Use Copy after login 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 Copy after login 2. Modify utils.js ## in build

#Change

scss: generateLoaders('sass') Copy after login to

scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { //你自己的scss全局文件的路径 resources: path.resolve(__dirname, '../src/style/common.scss') } } ) Copy after login 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 ! !