为 Vue 项目添加 SCSS 支持

Question

默认情况下，在我的packages.json 文件中，我得到：

"postcss": {
"plugins": {
  "autoprefixer": {}
}}

当我添加 <style lang='scss'> 时，它不像为 Typescript 支持那样编译得像魔术一样。我知道我需要将一些 NPM 包指定为 devDependencies 并在上面的 postcss 部分中指定一些内容以使 scss 进行编译，但我在 webpack 之外找不到任何文档，所以我迷路了。

Answer 1

见https://vue-loader.vuejs.org/guide/pre-processors.html。

例如，用 SASS/SCSS 编译我们的 <style> 标签：

npm install -D sass-loader node-sass

在你的 webpack 配置中：

module.exports = {
  module: {
    rules: [
      // ... other rules omitted

      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // plugin omitted
}

现在除了可以import 'style.scss'之外，我们还可以使用SCSS 在 Vue 组件中也是如此：

<style lang="scss"> /* write SCSS here */ </style>

块内的任何内容都将被 webpack 处理，就好像它是 在*.scss 文件中。