Using SASS/SCSS in Vue.js

Trong bài hướng dẫn này, mình sẽ hướng dẫn mọi người cách viết SASS/SCSS trong file vuejs. Thông thường là chúng ta thường viết CSS như file bên dưới. <template><div class='msg'>{{mess}}</div></template><script>exportdefault{data(){return{ mess :'Trang chủ'}}}</script><style scoped>.msg{ color:'green'}</style> Nhưng hiện tại bây giờ mọi người sẽ thường viết theo kiểu SASS/SCSS. Giúp chúng ta viết css dễ

Trong bài hướng dẫn này, mình sẽ hướng dẫn mọi người cách viết SASS/SCSS trong file vuejs.
Thông thường là chúng ta thường viết CSS như file bên dưới.

<template><div class='msg'>{{mess}}</div></template><script>exportdefault{data(){return{ 
             mess :'Trang chủ'}}}</script><style scoped>.msg{
   color:'green'}</style>

Nhưng hiện tại bây giờ mọi người sẽ thường viết theo kiểu SASS/SCSS. Giúp chúng ta viết css dễ dàng và nhanh hơn, cung cấp nhiều chức năng bổ sung cho css.

Bây giờ các bạn mở terminal lên và copy lệnh phía dưới vào rồi chạy, để cài đặt.

npm install sass-loader node-sass style-loader --save-dev
or
yarn add ...

hoặc bạn có thể mở filepackage.json lên và thêm như bên dưới

"devDependencies":{"css-loader":"^0.23.1","node-sass":"^4.1.1","sass-loader":"^3.2.3","style-loader":"^0.13.1""vue-loader":"^9.0.0","vue-router":"^2.1.1","webpack":"^1.12.2","webpack-dev-server":"^1.12.0"}

sau khi thêm xong thì các bạn chạy lệnh

npm i
or
yarn

để install tất cả các dependencies trên

Sau khi cài xong các bạn mở file webpack.config.js lên và thêm như bên dưới

module:{
    loaders:[{
        test:/.vue$/,
        loader:'vue'},{
          test:/.s[a|c]ss$/,
          loader:'style!css!sass'}]},
  vue:{
    loaders:{
      scss:'style!css!sass'}}

Đến đây chúng ta đã thiết lập xong SCSS/SASS trong project của mình. Bây giờ chúng ta vào src và mở file main.js lên

import Vue from"vue";import App from"./App.vue";newVue({render:(h)=>h(App),}).$mount("#app");

và mở file App.vue

<template><div class='msg'>{{mess}}<p class='title'>Tutorial</p></div></template><script>exportdefault{data(){return{ 
             mess :'SASS/SCSS loader'}}}</script><style lang="scss" scoped>
   @import'app.scss'</style>

bây giờ các bạn muốn sử dụng SASS/SCSS thì chỉ cẩn thay đổi lang="scss" là được, nếu các bạn không để gì thì sẽ hiểu là chúng ta đang viết css. Có 2 cách viết:

  • Chúng ta tạo một file scss riêng và import vào.
  • Chúng ta sẽ viết trực tiếp vào code vào thẻ style

Mình sẽ tạo một file scss riêng vào import file vào, để nhìn cho code đỡ dài. Giờ các bạn tạo một file app.scss và copy code bên dưới vào.

.msg {width: 1024px;height: 768px;background: #919890;.title {font-size: 15px;}}

Bây giờ các bạn mở trình duyệt lên và xem thành quả nhé.

Bài hướng dẫn của mình xin tạm dừng ở đây, Nếu có gì sai sót các bạn comment để mình sửa nhé. Cảm ơn các bạn đã đọc bài viết của mình.

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ