Vue 集成 SCSS 笔记

本文使用的 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

<template>
    <div id="app">
        <h1>测试</h1>
    </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style scoped lang="scss" type="text/scss">
    $h1-color: #F90;
    h1 {
        $width: 100px;
        width: $width;
        color: $h1-color;
    }
</style>

X. 附加问题

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

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

<style scoped lang="scss">
    $h1-color: #F90;
    h1 {
        $width: 100px;
        width: $width;
        color: $h1-color;
    }
</style>

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

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

<style scoped lang="scss" type="text/scss">
    $h1-color: #F90;
    h1 {
        $width: 100px;
        width: $width;
        color: $h1-color;
    }
</style>

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