How to use css preprocessor

No preprocessor was selected when creating the project, and the corresponding loader needs to be installed manually. The methods are: 1. Sass, "sass-loader node-sass"; 2. Less, "less-loader less"; 3. Stylus, "stylus-loader stylus".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS preprocessor

1. What is css preprocessor

CSS preprocessor is a specialized programming language used to add some programming features to CSS (CSS itself is not a programming language).

There is no need to consider browser compatibility issues, because the final compilation and output of the CSS preprocessor are still standard CSS styles.

You can use basic programming skills such as variables, simple logical judgments, and functions in the CSS preprocessor.

2. Several commonly used css preprocessors

• sass

• less

• stylus

3. How to use css preprocessor

If you do not select the required preprocessor (Sass/Less/Stylus) when creating the project , you need to manually install the corresponding loader

# Sass

npm install -D sass-loader node-sass

# Less

npm install -D less-loader less

# Stylus

npm install -D stylus-loader stylus

Example: App.vue is modified to Sass

$color: #42b983;
a {
color: $color;
}

4. Automatically import styles

To automatically import style files (for colors, variables, mixins, etc.), you can use style-resources-loader.

npm i -D style-resources-loader

Configuration

const path = require('path')
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [            ,
path.resolve(__dirname, './src/styles/imports.scss'),
],
})
}
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
},
}

Recommended learning: css video tutorial

The above is the detailed content of How to use css preprocessor. For more information, please follow other related articles on the PHP Chinese website!