本篇內(nèi)容主要講解“css預(yù)處理器的使用方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“css預(yù)處理器的使用方法”吧!

創(chuàng)新互聯(lián)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)，品牌網(wǎng)站制作，1元廣告等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10多年的網(wǎng)站開(kāi)發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破數(shù)千家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

1、什么是css預(yù)處理器

CSS預(yù)處理器是一種專(zhuān)門(mén)的編程語(yǔ)言，用來(lái)為CSS增加一些編程特性(CSS本身不是編程語(yǔ)言)。

不需要考慮瀏覽器兼容問(wèn)題，因?yàn)镃SS預(yù)處理器最終編譯和輸出的仍是標(biāo)準(zhǔn)的CSS樣式。

可以在CSS預(yù)處理器中：使用變量、簡(jiǎn)單邏輯判斷、函數(shù)等基本編程技巧。

2、常用的幾種css預(yù)處理器

sass

less

stylus

3、css預(yù)處理器的使用方法

如果創(chuàng)建項(xiàng)目時(shí)沒(méi)有選擇需要的預(yù)處理器(Sass/Less/Stylus)，則需手動(dòng)安裝相應(yīng)loader

# 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、自動(dòng)化導(dǎo)入樣式

自動(dòng)化導(dǎo)入樣式文件 (用于顏色、變量、mixin等)，可以使用style-resources-loader。

npm i -D style-resources-loader

實(shí)例

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)))
},
}

到此，相信大家對(duì)“css預(yù)處理器的使用方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！