Vue 集成 SCSS 笔记

原文链接： https://segmentfault.com/a/1190000012167729

本文使用的 Vue 版本为 2.5.2，Vue-Cli 版本为 2.9.1。

1. 安装相关依赖

执行：

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

也可以使用 cnpm 以避免依赖包下载过慢的问题。

2. 依赖配置

在 webpack.base.conf.js 中添加：

module: {
    rules: [
        {
            test: /\.s[a|c]ss$/,
            loaders: ["style", "css", "sass"]
        }
    ]
}

3. 在 Vue 文件中使用 SCSS

X. 附加问题

X.1 在 WebStorm 中使用 SCSS 有报错提示的问题

在 WebStorm 中，如果我们这么使用：

则 WebStorm 会因为无法正确识别而报错：

此时只要添加 type="text/scss"，改成如下即可：

X.2 编译时出现依赖模块无法找到的问题

有时可能会出现如下情况，考虑可能是使用 cnpm 安装导致的，可改用 npm 重新安装。

These dependencies were not found:

* !!vue-style-loader!css-loader?{"sourceMap":false}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0&bustCache!./App.vue in ./src/App.vue
* !!vue-style-loader!css-loader?{"sourceMap":false}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1badc801","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":false}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0&bustCache!./index.vue in ./src/pages/index/index.vue

---

参考

1. vue 项目 使用sass - 博客园
2. Using SASS/SCSS in Vue.js 2
3. How to use "scss" in *.vue? - Github Issue