CSS 相关

本节目标：理解“CSS 相关”的核心思路，并能把它用于实际开发或面试表达。 Vue CLI ==项目天生支持==

PostCSS

==、==

CSS Modules

==和包含==

Sass

==、==

Less

==、==

Stylus

==在内的预处理器。==

==引用静态资源== ==所有编译后的== CSS ==都会通过==

css-loader

==来解析其中的== url() ==引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个== npm ==依赖中的文件，或是想要用== webpack alias==，则需要在路径前加上== ~ ==的前缀来避免歧义。更多细节请参考====处理静态资源====。==

==预处理器== ==你可以在创建项目的时候选择预处理器== (Sass/Less/Stylus)==。如果当时没有选好，内置的== webpack ==仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的== webpack loader==：==

# Sass
Npm install-D sass-loader sass
# Less
Npm install-D less-loader less
# Stylus
npminstall-D stylus-loader stylus

==然后你就可以导入相应的文件类型，或在== *.vue ==文件中这样来使用：==

<stylelang="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

==内部使用了== PostCSS==。== ==你可以通过== .postcssrc ==或任何==

postcss-load-config

==支持的配置源来配置== PostCSS==。也可以通过== vue.config.js ==中的== css.loaderOptions.postcss ==配置==

postcss-loader

==。== ==我们默认开启了==

autoprefixer

==。如果要配置目标浏览器，可使用== package.json ==的==

browserslist

==字段。== 关于 CSS 中浏览器前缀规则的注意事项在生产环境构建中，Vue CLI 会优化 CSS 并基于目标浏览器抛弃不必要的浏览器前缀规则。因为默认开启了 autoprefixer，你只使用无前缀的 CSS 规则即可。

#CSS Modules

==你可以通过== \<style module\> ==以开箱即用的方式====在== *.vue ==文件中使用== CSS Modules==。== ==如果想在== JavaScript ==中作为== CSS Modules ==导入== CSS ==或其它预处理文件，该文件应该以== .module.(css|less|sass|scss|styl) ==结尾：==

Import styles from'./foo.module.css'//

所有支持的预处理器都一样工作

importsassStyles from'./foo.module.scss'

==如果你想去掉文件名中的== .module==，可以设置== vue.config.js ==中的== css.requireModuleExtension ==为== false==：==

// vue.config.jsmodule.exports ={css:{requireModuleExtension:false}}

==如果你希望自定义生成的== CSS Modules ==模块的类名，可以通过== vue.config.js ==中的== css.loaderOptions.css ==选项来实现。所有的== 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 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
```
```
  postcss-loader
```
```
  sass-loader
```
```
  less-loader
```
```
  stylus-loader
```

提示这样做比使用 chainWebpack 手动指定 loader 更推荐，因为这些选项需要应用在使用了相应 loader 的多个地方。 > 来自

 <https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9>

CSS 相关 ​

CSS 相关