Vue.js SSR CSS 管理

管理 CSS 的推薦方法是簡(jiǎn)單地使用 *.vue 單個(gè)文件組件內(nèi)的 <style>，它提供：

• 與 HTML 并列同級(jí)，組件作用域 CSS
• 能夠使用預(yù)處理器(pre-processor)或 PostCSS
• 開(kāi)發(fā)過(guò)程中熱重載(hot-reload)

更重要的是，vue-style-loader（vue-loader 內(nèi)部使用的 loader），具備一些服務(wù)器端渲染的特殊功能：

• 客戶端和服務(wù)器端的通用編程體驗(yàn)。

• 在使用 bundleRenderer 時(shí)，自動(dòng)注入關(guān)鍵 CSS(critical CSS)。

如果在服務(wù)器端渲染期間使用，可以在 HTML 中收集和內(nèi)聯(lián)（使用 template 選項(xiàng)時(shí)自動(dòng)處理）組件的 CSS。在客戶端，當(dāng)?shù)谝淮问褂迷摻M件時(shí)，vue-style-loader 會(huì)檢查這個(gè)組件是否已經(jīng)具有服務(wù)器內(nèi)聯(lián)(server-inlined)的 CSS - 如果沒(méi)有，CSS 將通過(guò) <style> 標(biāo)簽動(dòng)態(tài)注入。

• 通用 CSS 提取。

此設(shè)置支持使用 extract-text-webpack-plugin 將主 chunk(main chunk) 中的 CSS 提取到單獨(dú)的 CSS 文件中（使用 template 自動(dòng)注入），這樣可以將文件分開(kāi)緩存。建議用于存在很多公用 CSS 時(shí)。

內(nèi)部異步組件中的 CSS 將內(nèi)聯(lián)為 JavaScript 字符串，并由 vue-style-loader 處理。

啟用 CSS 提取

要從 *.vue 文件中提取 CSS，可以使用 vue-loader 的 extractCSS 選項(xiàng)（需要 vue-loader 12.0.0+）

// webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')


// CSS 提取應(yīng)該只用于生產(chǎn)環(huán)境
// 這樣我們?cè)陂_(kāi)發(fā)過(guò)程中仍然可以熱重載
const isProduction = process.env.NODE_ENV === 'production'


module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // enable CSS extraction
          extractCSS: isProduction
        }
      },
      // ...
    ]
  },
  plugins: isProduction
    // 確保添加了此插件！
    ? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })]
    : []
}

請(qǐng)注意，上述配置僅適用于 *.vue 文件中的樣式，然而你也可以使用 <style src="./foo.css"> 將外部 CSS 導(dǎo)入 Vue 組件。

如果你想從 JavaScript 中導(dǎo)入 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']
      }
    ]
  },
  // ...
}

從依賴模塊導(dǎo)入樣式

從 NPM 依賴模塊導(dǎo)入 CSS 時(shí)需要注意的幾點(diǎn)：

1. 在服務(wù)器端構(gòu)建過(guò)程中，不應(yīng)該外置化提取。

1. 在使用 CSS 提取 + 使用 CommonsChunkPlugin 插件提取 vendor 時(shí)，如果提取的 CSS 位于提取的 vendor chunk 之中，extract-text-webpack-plugin 會(huì)遇到問(wèn)題。為了解決這個(gè)問(wèn)題，請(qǐng)避免在 vendor chunk 中包含 CSS 文件?？蛻舳?webpack 配置示例如下：

  module.exports = {
    // ...
    plugins: [
      // 將依賴模塊提取到 vendor chunk 以獲得更好的緩存，是很常見(jiàn)的做法。
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module) {
          // 一個(gè)模塊被提取到 vendor chunk 時(shí)……
          return (
            // 如果它在 node_modules 中
            /node_modules/.test(module.context) &&
            // 如果 request 是一個(gè) CSS 文件，則無(wú)需外置化提取
            !/\.css$/.test(module.request)
          )
        }
      }),
      // 提取 webpack 運(yùn)行時(shí)和 manifest
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest'
      }),
      // ...
    ]
  }