在vue中使用 Sass/SCSS 预处理器

自动摘要

正在生成中……

默认情况下vue遇到模板中的 scss会报错，比如下面这个模板的标签：

<style lang="scss" scoped>
h2{
    color:red;
    
}
.title {
    &-sample{
        color:blue;
    }
}
</style>

原因是没有安装相关的loader 和配置webpack ，

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

安装相关的loader

npm install -D sass-loader node-sass

配置webpack

根目录下新建或编辑 webpack.config.js

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

重新编译预览

npm run serve

现在，除了在模板中使用 <style lang="scss"> ，还可以使用 import 'style.scss' 的方式引用。如：

<script>
    import '../assets/style.scss'
    export default {
        name: 'EditSomething',
        data() {
            return {
                //....
            }
        },
    }
</script>

参考资料：

https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass

https://www.youtube.com/watch?v=glb7G3aClmc