如何定制 Vue Webpack 加载器

Vue 最独特的功能之一是.vue 单个文件组件中对其他语言和预处理器的内置支持,这允许您使用任何您想要的预处理器,只要它有可用的 webpack 加载器。

配置

这假定您已经准备好了基本的 Webpack 配置(如果没有,请使用 vue-cli's webpack-simple 模板)。

一旦你有一个基本的构建准备好了,打开你的webpack.config.js 或类似的,并寻找视图加载选项。

1[label webpack.config.js]
2...
3{
4  test: /\.vue$/,
5  loader: 'vue-loader',
6  options: {
7  }
8},
9...

现在,对于您的模板中的某个块,Vue 会尝试找到对应的语言加载器,即 SASS 会变成 sass-loader 和 LESS -> less-loader。

幸运的是, vue-loader 允许您将用于任何语言的加载器加载,甚至添加 语言。

我们可以添加用于支持 SCSS 使用:

 1...
 2{
 3  test: /\.vue$/,
 4  loader: 'vue-loader',
 5  options: {
 6    loaders: {
 7      scss: {
 8        loader: 'sass-loader'
 9      }
10    }
11  }
12},
13...

然后使用它:

 1<template>
 2  ...
 3</template>
 4
 5<style lang="scss">
 6  .i {
 7    &.can {
 8      &.use {
 9        &.scss {
10          color: red;
11        }
12      }
13    }
14  }
15</style>

如果我们想要两个单独的配置相同的加载器,我们也可以这样做. 让我们创建一个新语言,这实际上只是css加载器的另一个配置。

 1...
 2{
 3  test: /\.vue$/,
 4  loader: 'vue-loader',
 5  options: {
 6    loaders: {
 7      scss: {
 8        loader: 'sass-loader'
 9      },
10
11      newscss: {
12        loader: 'sass-loader',
13        options: {
14          includePaths: ['../../../somewhere/far/far/away']
15        }
16      }
17    }
18  }
19},
20...

然后使用它:

 1<template>
 2  ...
 3</template>
 4
 5<style lang="newscss">
 6  @import 'starwars-styles';
 7
 8  .i {
 9    &.can {
10      &.use {
11        &.scss {
12          color: $font-color;
13        }
14      }
15    }
16  }
17</style>

此模式可以与几乎任何其他 webpack 加载器一起使用。唯一的要求是,脚本输出的加载器具有有效的JavaScript,风格输出的加载器具有有效的CSS,以及HTML输出的加载器具有有效的HTML部分,并正确处理视图风格属性。

Published At
Categories with 技术
Tagged with
comments powered by Disqus