mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-04-26 06:48:16 -05:00
Yazhe Wang
164 lines
6.2 KiB
Markdown
164 lines
6.2 KiB
Markdown
# CSS 相关
|
||
|
||
Vue CLI 项目天生支持 [PostCSS](http://postcss.org/)、[CSS Modules](https://github.com/css-modules/css-modules) 和包含 [Sass](https://sass-lang.com/)、[Less](http://lesscss.org/)、[Stylus](http://stylus-lang.com/) 在内的预处理器。
|
||
|
||
## 引用静态资源
|
||
|
||
所有编译后的 CSS 都会通过 [css-loader](https://github.com/webpack-contrib/css-loader) 来解析其中的 `url()` 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 `~` 的前缀来避免歧义。更多细节请参考[处理静态资源](./html-and-static-assets.md#处理静态资源)。
|
||
|
||
## 预处理器
|
||
|
||
你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：
|
||
|
||
``` bash
|
||
# Sass
|
||
npm install -D sass-loader sass
|
||
|
||
# Less
|
||
npm install -D less-loader less
|
||
|
||
# Stylus
|
||
npm install -D stylus-loader stylus
|
||
```
|
||
|
||
然后你就可以导入相应的文件类型，或在 `*.vue` 文件中这样来使用：
|
||
|
||
``` vue
|
||
<style lang="scss">
|
||
$color: red;
|
||
</style>
|
||
```
|
||
|
||
### 自动化导入
|
||
|
||
如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 [style-resources-loader](https://github.com/yenshih/style-resources-loader)。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 `./src/styles/imports.styl` 的例子：
|
||
|
||
```js
|
||
// 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](https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader)。
|
||
|
||
## PostCSS
|
||
|
||
Vue CLI 内部使用了 PostCSS。
|
||
|
||
你可以通过 `.postcssrc` 或任何 [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config) 支持的配置源来配置 PostCSS。也可以通过 `vue.config.js` 中的 `css.loaderOptions.postcss` 配置 [postcss-loader](https://github.com/postcss/postcss-loader)。
|
||
|
||
我们默认开启了 [autoprefixer](https://github.com/postcss/autoprefixer)。如果要配置目标浏览器，可使用 `package.json` 的 [browserslist](../guide/browser-compatibility.html#browserslist) 字段。
|
||
|
||
::: tip 关于 CSS 中浏览器前缀规则的注意事项
|
||
在生产环境构建中，Vue CLI 会优化 CSS 并基于目标浏览器抛弃不必要的浏览器前缀规则。因为默认开启了 `autoprefixer`，你只使用无前缀的 CSS 规则即可。
|
||
:::
|
||
|
||
## CSS Modules
|
||
|
||
你可以通过 `<style module>` 以开箱即用的方式[在 `*.vue` 文件中使用 CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html)。
|
||
|
||
如果想在 JavaScript 中作为 CSS Modules 导入 CSS 或其它预处理文件，该文件应该以 `.module.(css|less|sass|scss|styl)` 结尾：
|
||
|
||
``` js
|
||
import styles from './foo.module.css'
|
||
// 所有支持的预处理器都一样工作
|
||
import sassStyles from './foo.module.scss'
|
||
```
|
||
|
||
如果你想去掉文件名中的 `.module`，可以设置 `vue.config.js` 中的 `css.requireModuleExtension` 为 `false`：
|
||
|
||
``` js
|
||
// vue.config.js
|
||
module.exports = {
|
||
css: {
|
||
requireModuleExtension: false
|
||
}
|
||
}
|
||
```
|
||
|
||
如果你希望自定义生成的 CSS Modules 模块的类名，可以通过 `vue.config.js` 中的 `css.loaderOptions.css` 选项来实现。所有的 `css-loader` 选项在这里都是支持的，例如 `localIdentName` 和 `camelCase`：
|
||
|
||
``` js
|
||
// 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 样式传入共享的全局变量：
|
||
|
||
``` js
|
||
// vue.config.js
|
||
module.exports = {
|
||
css: {
|
||
loaderOptions: {
|
||
// 给 sass-loader 传递选项
|
||
sass: {
|
||
// @/ 是 src/ 的别名
|
||
// 所以这里假设你有 `src/variables.sass` 这个文件
|
||
// 注意：在 sass-loader v8 中，这个选项名是 "prependData"
|
||
additionalData: `@import "~@/variables.sass"`
|
||
},
|
||
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
|
||
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
|
||
// 但是在配置 `prependData` 选项的时候
|
||
// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
|
||
// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
|
||
scss: {
|
||
additionalData: `@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` 配置，包括：
|
||
|
||
- [css-loader](https://github.com/webpack-contrib/css-loader)
|
||
- [postcss-loader](https://github.com/postcss/postcss-loader)
|
||
- [sass-loader](https://github.com/webpack-contrib/sass-loader)
|
||
- [less-loader](https://github.com/webpack-contrib/less-loader)
|
||
- [stylus-loader](https://github.com/shama/stylus-loader)
|
||
|
||
::: tip 提示
|
||
这样做比使用 `chainWebpack` 手动指定 loader 更推荐，因为这些选项需要应用在使用了相应 loader 的多个地方。
|
||
:::
|