Cách sử dụng SCSS với Vue.js Single File Components

Tìm hiểu cách bật SCSS vào các thành phần Vue.js của bạn

Sử dụngVue CLIbạn có thể bật “Bộ tiền xử lý CSS” và bạn có thể chọn kích hoạt cái nào:

Vue CLI

Nếu bạn đang sử dụng một dự án không dựa trên Vue CLI hoặc một dự án đã được khởi tạo bằng Vue CLI nhưng bạn không thêm hỗ trợ tiền xử lý CSS, bạn có thể thêm nó sau bằng cách sử dụng:

npm install --save-dev node-sass sass-loader

Bên trong các thành phần ứng dụng của bạn thì bạn có thể sử dụng

<style lang="scss">
...
</style>

và thêm mã SCSS của bạn vào đó.

Nếu bạn muốn giữ mã SCSS của mình trong một tệp bên ngoài, bạn có thể làm điều đó và chỉ cần nhập mã đó vào phần tập lệnh của thành phần của bạn:

<script>
import '../public/style.scss'

//… </script>

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: