Vue.js教程
8.10 CSS 管理
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

Vue.js 服务器端渲染 SSR

简介

基本用法

编写通用代码

源码结构

路由和代码分割

数据预取和状态

客户端混合

Bundle Renderer 简介

构建配置

CSS 管理

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

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

更重要的是,vue-style-loadervue-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-loaderextractCSS选项(需要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 时需要注意的几点:

  1. 在服务器端构建过程中,不应该外置化提取。

  2. 如果使用 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'
      }),
      // ...
    ]
  }

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验