VueJS: Làm việc với CSS

Các dự án Vue CLI đi kèm với sự hỗ trợ cho PostCSS, CSS Modules và pre-processor bao gồm Sass, Less và Stylus.

Tham chiếu Nội dung

Tất cả CSS được biên dịch đều được xử lý bởi trình nạp css, phân tích cú pháp url()và giải quyết chúng dưới dạng các yêu cầu mô-đun. Điều này có nghĩa là bạn có thể tham chiếu đến nội dung bằng cách sử dụng đường dẫn tương đối dựa trên cấu trúc tệp cục bộ. Lưu ý nếu bạn muốn tham chiếu tệp bên trong phụ thuộc npm hoặc thông qua bí danh webpack, đường dẫn phải được bắt đầu bằng ~ để tránh sự mơ hồ. Xem Xử lý nội dung tĩnh để biết thêm chi tiết.

Trình xử lý trước

Bạn có thể chọn các bộ xử lý trước (Sass/Less/Stylus) khi tạo dự án. Nếu bạn không làm như vậy, cấu hình webpack nội bộ vẫn được định cấu hình sẵn để xử lý tất cả chúng. Bạn chỉ cần cài đặt thủ công bộ nạp webpack tương ứng:

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

Sau đó, bạn có thể nhập các loại tệp tương ứng hoặc sử dụng chúng trong các tệp *.vue:

<style lang="scss">
$color: red;
</style>

#Nhập tự động

Nếu bạn muốn tự động nhập tệp (đối với màu sắc, biến, mixin ...), bạn có thể sử dụng trình tải tài nguyên kiểu. Dưới đây là ví dụ về stylus nhập ./src/styles/imports.styl trong mọi SFC và mọi tệp stylus:

// 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'),
      ],
    })
}

Bạn cũng có thể sử dụng trình tải -vie-cli-plugin-style-resources-loader.

PostCSS

Vue CLI sử dụng PostCSS bên trong.

Bạn có thể cấu hình PostCSS qua .postcssrc hoặc bất kỳ nguồn cấu hình nào được hỗ trợ bởi postcss-load-config, và cấu hình postcss-loader thông qua css.loaderOptions.postcss trong vue.config.js.

Các plugin autoprefixer được kích hoạt theo mặc định. Để định cấu hình các mục tiêu trình duyệt, hãy sử dụng trường danh sách trình duyệt trong package.json.

Mô-đun CSS

Bạn có thể sử dụng các Mô-đun CSS trong tệp *.vue ngoài box với <style module>.

Để nhập tệp CSS hoặc các tệp tiền xử lý khác dưới dạng Mô-đun CSS trong JavaScript, tên tệp phải kết thúc bằng .module.(css|less|sass|scss|styl):

import styles from './foo.module.css'
// làm việc tốt với tất cả các bộ tiền xử lý
import sassStyles from './foo.module.scss'

Nếu bạn muốn thả .module trong các tên tập tin, thiết lập css.modules thành true trong vue.config.js:

// vue.config.js
module.exports = {
  css: {
    modules: true
  }
}

Nếu bạn muốn tùy chỉnh tên lớp của mô-đun CSS được tạo, bạn có thể làm như vậy qua css.loaderOptions.css trong vue.config.js. Tất cả các tùy chọn css-loader được hỗ trợ ở đây, ví dụ localIdentName và camelCase:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      }
    }
  }
}

#Truyền tùy chọn cho trình loader tiền xử lý

Đôi khi bạn có thể muốn chuyển các tùy chọn tới trình tải gói webpack của bộ xử lý trước. Bạn có thể làm điều đó bằng cách sử dụng tùy chọn css.loaderOptions trong vue.config.js. Ví dụ: để chuyển một số biến toàn cục được chia sẻ cho tất cả các kiểu Sass của bạn ta làm như sau:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

Các trình tải có thể được cấu hình thông qua loaderOptionsbao gồm:

• css-loader
• postcss-loader
• sass-loader
• less-loader
• stylus-loader