VueJS: Quản lý CSS

Cách được khuyến nghị để quản lý CSS là chỉ cần sử dụng <style> bên trong các component *.vue, điều này sẽ cho ta:

• Đặt tại một nơi, component-scoped CSS
• Khả năng tận dụng tiền xử lý hoặc PostCSS
• Tải lại nóng trong khi phát triển

Quan trọng hơn, bộ nạp (loader) vue-style-loader được sử dụng trong nội bộ vue-loader, có một số tính năng đặc biệt để kết xuất máy chủ:

• Trải nghiệm author global cho máy khách và máy chủ.

• Tự động nhấn mạnh CSS khi sử dụng bundleRenderer.

  Nếu được sử dụng trong quá trình kết xuất máy chủ, CSS của component có thể được thu thập và được lưu tâm trong HTML (tự động xử lý khi sử dụng tùy chọn template). Trên client, khi component được sử dụng lần đầu tiên, vue-style-loader sẽ kiểm tra xem đã có CSS ​​được chèn vào server cho component này hay chưa - nếu chưa thì CSS sẽ được chèn động thông qua thẻ <style>.

• Khai thác CSS thông dụng.

  Cài đặt này sẽ hỗ trợ sử dụng extract-text-webpack-plugin để trích xuất CSS trong đoạn chính thành một tệp CSS riêng biệt (tự động được đưa vào với template), cho phép tệp được lưu trữ riêng lẻ. Điều này được khuyến khích khi có nhiều CSS được chia sẻ.

  CSS bên trong các component không đồng bộ sẽ vẫn được inline dưới dạng chuỗi JavaScript và được xử lý bởi vue-style-loader.

#Cho phép trích xuất CSS

Để trích xuất CSS từ các file *.vue, hãy sử dụng tùy chọn extractCSS của vue-loader (yêu cầu vue-loader 12.0.0+):

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

// Trích xuất CSS chỉ nên được áp dụng cho chế độ production
// nên ta sẽ thực hiện hot-reload trong chế độ development.
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // cho phép trích xuất CSS
          extractCSS: isProduction
        }
      },
      // ...
    ]
  },
  plugins: isProduction
    // hãy đảm bảo thêm plugin!
    ? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })]
    : []
}

Lưu ý rằng cấu hình trên chỉ áp dụng cho các kiểu trong các file *.vue, nhưng bạn có thể sử dụng <style src="./foo.css"> để nhập CSS bên ngoài vào các thành phần Vue.

Nếu bạn muốn nhập CSS từ JavaScript, ví dụ: import 'foo.css' bạn cần định cấu hình trình tải thích hợp:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        // important: use vue-style-loader instead of style-loader
        use: isProduction
          ? ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            })
          : ['vue-style-loader', 'css-loader']
      }
    ]
  },
  // ...
}

Import style từ các dependency

Một vài điều cần lưu ý khi nhập CSS từ dependency NPM:

1. Nó không nên được đặt ngoài trong quá trình build server.

2. Nếu sử dụng trích xuất CSS + nhà cung cấp giải nén cùng CommonsChunkPlugin, extract-text-webpack-plugin sẽ gặp sự cố nếu CSS được trích xuất nằm bên trong một đoạn nhà cung cấp được trích xuất. Để giải quyết vấn đề này, hãy tránh đưa vào các tệp CSS trong đoạn nhà cung cấp. Ví dụ về cấu hình webpack của client:

module.exports = {
  // ...
  plugins: [
    // Đây là cách phổ biến để trích xuất các dependency vào trong một đoạn vendor để cache tốt hơn.
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // một module được trích xuất vào trong đoạn vendor khi...
        return (
          // nó ở bên trong node_modules
          /node_modules/.test(module.context) &&
          // do not externalize if the request is a CSS file
          !/\.css$/.test(module.request)
        )
      }
    }),
    // trích xuất webpack runtime và manifest
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),
    // ...
  ]
}