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文件中。

向Vue项目添加SCSS支持

1 个答案: