8.10 CSS 管理

优质

小牛编辑

145浏览

2023-12-01

管理 CSS 的推荐方法是简单地使用*.vue单个文件组件内的<style>，它提供：

与 HTML 并列同级，组件作用域 CSS
能够使用预处理器(pre-processor)或 PostCSS
开发过程中热重载(hot-reload)

更重要的是，vue-style-loader（vue-loader内部使用的 loader），具备一些服务器端渲染的特殊功能：

客户端和服务器端的通用编程体验。
在使用bundleRenderer时，自动注入关键 CSS(critical CSS)。
如果在服务器端渲染期间使用，可以在 HTML 中收集和内联（使用template选项时自动处理）组件的 CSS。在客户端，当第一次使用该组件时，vue-style-loader会检查这个组件是否已经具有服务器内联(server-inlined)的 CSS - 如果没有，CSS 将通过<style>标签动态注入。
通用 CSS 提取。
此设置支持使用extract-text-webpack-plugin将主 chunk(main chunk) 中的 CSS 提取到单独的 CSS 文件中（使用template自动注入），这样可以将文件分开缓存。建议用于存在很多公用 CSS 时。
内部异步组件中的 CSS 将内联为 JavaScript 字符串，并由vue-style-loader处理。

启用 CSS 提取

要从*.vue文件中提取 CSS，可以使用vue-loader的extractCSS选项（需要vue-loader12.0.0+）

// webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// CSS 提取应该只用于生产环境
// 这样我们在开发过程中仍然可以热重载
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // enable CSS extraction
          extractCSS: isProduction
        }
      },
      // ...
    ]
  },
  plugins: isProduction
    // make sure to add the plugin!
    ? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })]
    : []
}

请注意，上述配置仅适用于*.vue文件中的样式，然而你也可以使用<style src="./foo.css">将外部 CSS 导入 Vue 组件。

如果你想从 JavaScript 中导入 CSS，例如，import 'foo.css'，你需要配置合适的 loader：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        // 重要：使用 vue-style-loader 替代 style-loader
        use: isProduction
          ? ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            })
          : ['vue-style-loader', 'css-loader']
      }
    ]
  },
  // ...
}

从依赖模块导入样式

从 NPM 依赖模块导入 CSS 时需要注意的几点：

在服务器端构建过程中，不应该外置化提取。
如果使用 CSS 提取 + 使用CommonsChunkPlugin插件提取 vendor，在extract-text-webpack-plugin提取 CSS 到 vendor chunk 时将遇到问题。为了应对这个问题，请避免在 vendor chunk 中包含 CSS 文件。客户端 webpack 配置示例如下：

  module.exports = {
    // ...
    plugins: [
      // 将依赖模块提取到 vendor chunk 以获得更好的缓存，是很常见的做法。
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module) {
          // 一个模块被提取到 vendor chunk 时……
          return (
            // 如果它在 node_modules 中
            /node_modules/.test(module.context) &&
            // 如果 request 是一个 CSS 文件，则无需外置化提取
            !/\.css$/.test(module.request)
          )
        }
      }),
      // 提取 webpack 运行时和 manifest
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest'
      }),
      // ...
    ]
  }