CSS 전처리기를 사용하는 방법

프로젝트 생성시 전처리기를 선택하지 않았으며 해당 로더를 수동으로 설치해야 합니다. 방법은 다음과 같습니다: 1. Sass, "sass-loader node-sass"; 2. Less, "less-loader less" 3. 스타일러스, "stylus-loader stylus".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 전처리기

1. CSS 전처리기란 무엇입니까

CSS 전처리기는 CSS에 일부 프로그래밍 기능을 추가하는 데 사용되는 특수 프로그래밍 언어입니다(CSS 자체는 프로그래밍 언어가 아닙니다).

CSS 전처리기가 궁극적으로 표준 CSS 스타일을 컴파일하고 출력하므로 브라우저 호환성 문제를 고려할 필요가 없습니다.

CSS 전처리기에서는 변수, 간단한 논리적 판단, 함수 등 기본적인 프로그래밍 기술을 사용할 수 있습니다.

2. 일반적으로 사용되는 여러 가지 CSS 전처리기

• sass

• less

• stylus

3. 프로젝트 생성 시 필수 항목을 선택하지 않은 경우 전처리기(Sass/Less/Stylus), 해당 로더를 수동으로 설치해야 합니다

# Sass

npm install -D sass-loader node-sass

# Less

npm install -D less-loader less

# Stylus

npm install -D stylus-loader stylus

예: App.vue가 Sass

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

4로 수정되었습니다. 스타일

스타일 파일(색상, 변수, 믹스인 등)을 자동으로 가져오려면 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)))
},
}

추천 학습:

css 비디오 튜토리얼

위 내용은 CSS 전처리기를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!