Vue CLI uses PostCSS internally, and enables autoprefixer by default. You can configure PostCSS via .postcssrc or any config source supported by postcss-load-config.
You can use CSS Modules in *.vue files out of the box with <style module>.
As for standalone style files, any files ending with .module.(css|sass|scss|less|styl|stylus) will be processed as CSS modules.
If you wish to be able to use CSS modules without the .module postfix, you can set css: { modules: true } in vue.config.js. This option does not affect *.vue files.
If you wish to customize the CSS modules class name output you can set the css: { localIdentName: [name]__[local]--[hash:base64:5]} in vue.config.js.
You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, you can also just manually install the corresponding webpack loaders. The loaders are pre-configured and will automatically be picked up. For example, to add Sass to an existing project, simply run:
npm install -D sass-loader node-sassThen you can import .scss files, or use it in *.vue files with:
<style lang="scss">
$color = red;
</style>Sometimes you may want to pass options to the pre-processor's webpack loader. You can do that using the css.loaderOptions option in vue.config.js. For example, to pass some shared global variables to all your Sass styles:
// vue.config.js
const fs = require('fs')
module.exports = {
css: {
loaderOptions: {
sass: {
data: fs.readFileSync('src/variables.scss', 'utf-8')
}
}
}
}