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 when lost.
Solution :
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 the 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.js 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.