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