免費(fèi)AI編程助手
Vue CLI CSS 相關(guān)
Vue CLI 項(xiàng)目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在內(nèi)的預(yù)處理器。
引用靜態(tài)資源
所有編譯后的 CSS 都會(huì)通過(guò) css-loader 來(lái)解析其中的 url() 引用，并將這些引用作為模塊請(qǐng)求來(lái)處理。這意味著你可以根據(jù)本地的文件結(jié)構(gòu)用相對(duì)路徑來(lái)引用靜態(tài)資源。另外要注意的是如果你想要引用一個(gè) npm 依賴(lài)中的文件，或是想要用 webpack alias，則需要在路徑前加上 ~ 的前綴來(lái)避免歧義。更多細(xì)節(jié)請(qǐng)參考處理靜態(tài)資源。
預(yù)處理器
你可以在創(chuàng)建項(xiàng)目的時(shí)候選擇預(yù)處理器 (Sass/Less/Stylus)。如果當(dāng)時(shí)沒(méi)有選好，內(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)的文件類(lèi)型，或在 *.vue 文件中這樣來(lái)使用：
<style lang="scss">
$color: red;
</style>
自動(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。
你可以通過(guò) .postcssrc 或任何 postcss-load-config 支持的配置源來(lái)配置 PostCSS。也可以通過(guò) vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
我們默認(rèn)開(kāi)啟了 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)開(kāi)啟了 autoprefixer，你只使用無(wú)前綴的 CSS 規(guī)則即可。
CSS Modules
你可以通過(guò) <style module> 以開(kāi)箱即用的方式在 *.vue 文件中使用 CSS Modules。
如果想在 JavaScript 中作為 CSS Modules 導(dǎo)入 CSS 或其它預(yù)處理文件，該文件應(yīng)該以 .module.(css|less|sass|scss|styl) 結(jié)尾：
import styles from './foo.module.css'
// 所有支持的預(yù)處理器都一樣工作
import sassStyles from './foo.module.scss'
如果你想去掉文件名中的 .module，可以設(shè)置 vue.config.js 中的 css.requireModuleExtension 為 false：
// vue.config.js
module.exports = {
css: {
requireModuleExtension: false
}
}
如果你希望自定義生成的 CSS Modules 模塊的類(lèi)名，可以通過(guò) vue.config.js 中的 css.loaderOptions.css 選項(xiàng)來(lái)實(shí)現(xiàn)。所有的 css-loader 選項(xiàng)在這里都是支持的，例如 localIdentName 和 camelCase：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
css: {
// 注意：以下配置在 Vue CLI v4 與 v3 之間存在差異。
// Vue CLI v3 用戶(hù)可參考 css-loader v1 文檔
// https://github.com/webpack-contrib/css-loader/tree/v1.0.1
modules: {
localIdentName: '[name]-[hash]'
},
localsConvention: 'camelCaseOnly'
}
}
}
}
向預(yù)處理器 Loader 傳遞選項(xiàng)
有的時(shí)候你想要向 webpack 的預(yù)處理器 loader 傳遞選項(xiàng)。你可以使用 vue.config.js 中的 css.loaderOptions 選項(xiàng)。比如你可以這樣向所有 Sass/Less 樣式傳入共享的全局變量：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 給 sass-loader 傳遞選項(xiàng)
sass: {
// @/ 是 src/ 的別名
// 所以這里假設(shè)你有 `src/variables.sass` 這個(gè)文件
// 注意：在 sass-loader v7 中，這個(gè)選項(xiàng)名是 "data"
prependData: `@import "~@/variables.sass"`
},
// 默認(rèn)情況下 `sass` 選項(xiàng)會(huì)同時(shí)對(duì) `sass` 和 `scss` 語(yǔ)法同時(shí)生效
// 因?yàn)?`scss` 語(yǔ)法在內(nèi)部也是由 sass-loader 處理的
// 但是在配置 `data` 選項(xiàng)的時(shí)候
// `scss` 語(yǔ)法會(huì)要求語(yǔ)句結(jié)尾必須有分號(hào)，`sass` 則要求必須沒(méi)有分號(hào)
// 在這種情況下，我們可以使用 `scss` 選項(xiàng)，對(duì) `scss` 語(yǔ)法進(jìn)行單獨(dú)配置
scss: {
prependData: `@import "~@/variables.scss";`
},
// 給 less-loader 傳遞 Less.js 相關(guān)選項(xiàng)
less:{
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
primary: '#fff'
}
}
}
}
}
Loader 可以通過(guò) loaderOptions 配置，包括：
提示
這樣做比使用 chainWebpack 手動(dòng)指定 loader 更推薦，因?yàn)檫@些選項(xiàng)需要應(yīng)用在使用了相應(yīng) loader 的多個(gè)地方。
更多建議：