Cách tùy chỉnh Vue Webpack Loaders

---

Một trong những tính năng độc đáo nhất của Vue là hỗ trợ tích hợp cho các ngôn ngữ và bộ xử lý trước khác trong .vue single-file-components. Điều này cho phép bạn sử dụng bất kỳ bộ xử lý trước nào bạn muốn miễn là nó có bộ tải webpack có sẵn. Thường thì mặc định là đủ, nhưng ở đây ta sẽ chỉ cho bạn cách thêm ngôn ngữ mới (loại) vào Vue và cấu hình các ngôn ngữ khác.

Cấu hình

Điều này giả sử bạn đã có một cấu hình Webpack cơ bản sẵn sàng. (Nếu không, hãy sử dụng mẫu webpack-simple của vue-cli .)

Khi bạn đã có một bản dựng cơ bản sẵn sàng, hãy mở webpack.config.js của bạn hoặc tương tự và tìm kiếm các tùy chọn vue-loader .

...
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
  }
},
...

Bây giờ, đối với một khối nhất định trong mẫu của bạn, Vue sẽ cố gắng tìm trình tải phù hợp cho ngôn ngữ. I E. SASS trở thành bộ tải sass và LESS -> bộ tải ít hơn . Đó là tất cả tốt và tốt, nhưng thường mọi người muốn sử dụng SCSS . Và không có thứ gì gọi là scss-loader .

Rất may, vue-loader cho phép bạn overrides trình tải được sử dụng cho bất kỳ ngôn ngữ nào và thậm chí thêm các ngôn ngữ mới .

Ta có thể bổ sung hỗ trợ cho SCSS bằng cách sử dụng:

...
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: {
        loader: 'sass-loader'
      }
    }
  }
},
...

Và sử dụng nó:

<template>
  ...
</template>

<style lang="scss">
  .i {
    &.can {
      &.use {
        &.scss {
          color: red;
        }
      }
    }
  }
</style>

Nếu ta muốn hai cấu hình riêng biệt của cùng một bộ nạp, ta cũng có thể làm điều đó. Hãy tạo một “ngôn ngữ mới” thực sự chỉ là một cấu hình khác của scss-loader .

...
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: {
        loader: 'sass-loader'
      },

      newscss: {
        loader: 'sass-loader',
        options: {
          includePaths: ['../../../somewhere/far/far/away']
        }
      }
    }
  }
},
...

Và sử dụng nó:

<template>
  ...
</template>

<style lang="newscss">
  @import 'starwars-styles';

  .i {
    &.can {
      &.use {
        &.scss {
          color: $font-color;
        }
      }
    }
  }
</style>

Mẫu này được dùng với hầu hết mọi trình tải gói web khác. Yêu cầu duy nhất là bộ tải cho các tập lệnh xuất ra JavaScript hợp lệ, bộ tải cho các kiểu xuất ra CSS hợp lệ và bộ tải cho các phần tử HTML hợp lệ kết quả HTML và xử lý các thuộc tính kiểu vue một cách chính xác. Kết quả là, việc sử dụng hầu hết các bộ xử lý trước trong Vue là điều tầm thường. Thưởng thức!

---

---

Các tin liên quan