# 使用预处理器 在 webpack 中，所有的预处理器需要匹配对应的 loader。Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的 loader。
# Sass 例如，为了通过 Sass/SCSS 编译我们的
这个块里的任何内容都会被 webpack 当作在一个 *.scss 文件中一样被处理。
# Sass vs SCSS 注意 sass-loader 会默认处理不基于缩进的 scss 语法。为了使用基于缩进的 sass 语法，你需要向这个 loader 传递选项：
// webpack.config.js -> module.rules
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
// sass-loader version >= 8
sassOptions: {
indentedSyntax: true
}
}
}
]
}
# 共享全局变量 sass-loader 也支持一个 additionalData 选项，这个选项允许你在所有被处理的文件之间共享常见的变量，而不需要显式地导入它们：
// webpack.config.js -> module.rules
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
// 你也可以从一个文件读取，例如 `variables.scss`
// 如果 sass-loader 版本 = 8，这里使用 `prependData` 字段
// 如果 sass-loader 版本 < 8，这里使用 `data` 字段
additionalData: `$color: red;`
}
}
]
}
# Less npm install -D less less-loader
// webpack.config.js -> module.rules
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
# Stylus npm install -D stylus stylus-loader
// webpack.config.js -> module.rules
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}
# PostCSS TIP
Vue Loader v15 不再默认应用 PostCSS 变换。你需要通过 postcss-loader 使用 PostCSS。
npm install -D postcss-loader
// webpack.config.js -> module.rules
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
'postcss-loader'
]
}
PostCSS 的配置可以通过 postcss.config.js 或 postcss-loader 选项来完成。其更多细节请查阅 postcss-loader 文档。
postcss-loader 也可以和上述其它预处理器结合使用。
# Babel npm install -D babel-core babel-loader
// webpack.config.js -> module.rules
{
test: /\.js?$/,
loader: 'babel-loader'
}
Babel 的配置可以通过 .babelrc 或 babel-loader 选项来完成。
# 排除 node_modules exclude: /node_modules/ 在应用于 .js 文件的 JS 转译规则 (例如 babel-loader) 中是蛮常见的。鉴于 v15 中的推导变化，如果你导入一个 node_modules 内的 Vue 单文件组件，它的