向Vue项目添加SCSS支持

Question

In my packages.json file by default I get:

"postcss": {
"plugins": {
  "autoprefixer": {}
}}

When I add <style lang='scss'> It doesn't compile like magic like it does for Typescript support. I know I will need to specify some NPM package as devDependencies and specify something above in the postcss section to get scss to compile, but I can't find any documentation outside of webpack so I am lost.

Answer 1

See https://vue-loader.vuejs.org/guide/pre-processors.html .

For example, to compile our <style> tag with SASS/SCSS:

 npm install -D sass-loader node-sass 

In your webpack config:

 module.exports = { module: { rules: [ // ... other rules omitted // this will apply to both plain `.scss` files // AND `<style lang="scss">` blocks in `.vue` files { test: /\\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] } ] }, // plugin omitted } 

Now in addition to being able to import 'style.scss' , we can use SCSS in Vue components as well:

 <style lang="scss"> /* write SCSS here */ </style> 

Any content inside the block will be processed by webpack as if it's inside a *.scss file.