建站
咨詢
售后
建站咨詢
新聞中心
Vue CLI 項(xiàng)目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在內(nèi)的預(yù)處理器。
引用靜態(tài)資源
所有編譯后的 CSS 都會(huì)通過 css-loader 來解析其中的 url() 引用，并將這些引用作為模塊請(qǐng)求來處理。這意味著你可以根據(jù)本地的文件結(jié)構(gòu)用相對(duì)路徑來引用靜態(tài)資源。另外要注意的是如果你想要引用一個(gè) npm 依賴中的文件，或是想要用 webpack alias，則需要在路徑前加上 ~ 的前綴來避免歧義。更多細(xì)節(jié)請(qǐng)參考處理靜態(tài)資源。
預(yù)處理器
你可以在創(chuàng)建項(xiàng)目的時(shí)候選擇預(yù)處理器 (Sass/Less/Stylus)。如果當(dāng)時(shí)沒有選好，內(nèi)置的 webpack 仍然會(huì)被預(yù)配置為可以完成所有的處理。你也可以手動(dòng)安裝相應(yīng)的 webpack loader：
# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
然后你就可以導(dǎo)入相應(yīng)的文件類型，或在 *.vue 文件中這樣來使用：
自動(dòng)化導(dǎo)入
如果你想自動(dòng)化導(dǎo)入文件 (用于顏色、變量、mixin……)，你可以使用 style-resources-loader。這里有一個(gè)關(guān)于 Stylus 的在每個(gè)單文件組件和 Stylus 文件中導(dǎo)入 ./src/styles/imports.styl 的例子：
// vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
},
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/styles/imports.styl'),
],
})
}
你也可以選擇使用 vue-cli-plugin-style-resources-loader。
PostCSS
Vue CLI 內(nèi)部使用了 PostCSS。
你可以通過 .postcssrc 或任何 postcss-load-config 支持的配置源來配置 PostCSS。也可以通過 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
我們默認(rèn)開啟了 autoprefixer。如果要配置目標(biāo)瀏覽器，可使用 package.json 的 browserslist 字段。
關(guān)于 CSS 中瀏覽器前綴規(guī)則的注意事項(xiàng)
在生產(chǎn)環(huán)境構(gòu)建中，Vue CLI 會(huì)優(yōu)化 CSS 并基于目標(biāo)瀏覽器拋棄不必要的瀏覽器前綴規(guī)則。因?yàn)槟J(rèn)開啟了 autoprefixer，你只使用無前綴的 CSS 規(guī)則即可。
CSS Modules
你可以通過