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部分,并正确处理视图风格属性。