Vue项目中使用sass

# 创建项目

1. 安装`vue`: `nmp install vue` 或者 `cnpm install vue`;

2. 安装`vue-cli`: `npm install --global vue-cli` 或者 `cnpm install --global vue-cli`;

3. 基于webpack模板创建项目： `vue init webpack sass-todo`;

4. 进入项目： `cd vuex-todo`;

5. 安装依赖：`npm install` 或者 `cnpm install`;

6. 安装 sass: `npm install --save-loader`和`npm install --save-dev node-sass`;

7.  运行项目： `npm run dev` 或者 `cnpm run dev`;

# 修改style标签

将项目中的组件文件中的style标签上添加上lang="sass"或者lang="scss"属性：

<template>

<div id="app"></div>

</template>

<script>

 export default {

}

</script>

<style lang="sass"></style>

# 引入sass文件

在一个组件中如果需要引入外部的sass样式文件需要使用@import

@import "./common/scss/reset";

# 问题

运行npm  run dev后出现以下问题

* !!vue-style-loader!css-loader?{"sourceMap":false}!../node_modules/_vue-loader@13.5.0@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!sass-loader?{"indentedSyntax":true,"sourceMap":false}!../node_modules/_vue-loader@13.5.0@vue-loader/lib/selector?type=styles&index=0&bustCache!./App.vue in ./src/App.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":false}!../node_modules/_vue-loader@13.5.0@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!sass-loader?{"indentedSyntax":true,"sourceMap":false}!../node_modules/_vue-loader@13.5.0@vue-loader/lib/selector?type=styles&index=0&bustCache!./App.vue

原因：缺少依赖

执行命令：

cnpm install stylus-loader css-loader style-loader --save-dev

在再次行项目：

npm run dev