预处理器的使用

预处理器的使用

将 vue-loader 与 webpack 一起使用的好处之一是能够直接在你的 Vue 组件文件中预处理你的 HTML/CSS/JS，而无需其他工作。

使用案例

假设我们需要使用 Sass/SCSS 来预处理我们的 CSS。首先，我们需要安装正确的 webpack 加载器来处理这种语法。

安装 sass-loader

npm install --save-dev sass-loader node-sass

一旦安装了我们需要的加载器，一切就都差不多完成了。vue-loader 将神奇地做好其余的工作。现在我们可以轻松地将 lang="sass" 或 lang="scss" 添加到我们的 Vue 组件文件中。注意，我们还安装了 node-sass，因为它是 sass-loader 的依赖包。

Sass/SCSS 全局变量的使用

当使用 Sass/SCSS 作为你的 CSS 语法时，在整个 Vue 组件文件中使用 全局变量 与 混合嵌套 是非常有益的。以下是此方法的实现。

定义你的全局变量

src/renderer/globals.scss

$brand-primary: blue;
$brand-accent: turquoise;