Vue.js - Vue Loader - Using Pre-Processors

先介绍

Sass

https://www.sass.hk/docs/

SCSS

https://sass.bootcss.com/documentation/syntax

使用预处理器

在 webpack 中，所有的预处理器需要匹配对应的 loader。Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的 loader。

Sass

例如，为了通过 Sass/SCSS 编译我们的 <style> 标签：

npm install -D sass-loader node-sass

在你的 webpack 配置中：

module.exports = {
  module: {
    rules: [
      // ... 忽略其它规则

      // 普通的 `.scss` 文件和 `*.vue` 文件中的
      // `<style lang="scss">` 块都应用它
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // 插件忽略
}

现在，除了能够 import 'style.scss'，我们还可以在 Vue 组件中使用 SCSS：

<style lang="scss">
/* 在这里撰写 SCSS */
</style>

这个块里的任何内容都会被 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 也支持一个 prependData 选项，这个选项允许你在所有被处理的文件之间共享常见的变量，而不需要显式地导入它们：

// 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;`
      }
    }
  ]
}