# 创建项目
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