# 創(chuàng)建項目
1. 安裝`vue`: `nmp install vue` 或者 `cnpm install vue`;
2. 安裝`vue-cli`: `npm install --global vue-cli` 或者 `cnpm install --global vue-cli`;
3. 基于webpack模板創(chuàng)建項目: `vue init webpack sass-todo`;
4. 進(jìn)入項目: `cd vuex-todo`;
5. 安裝依賴:`npm install` 或者 `cnpm install`;
6. 安裝 sass: `npm install --save-loader`和`npm install --save-dev node-sass`;
7.? 運(yùn)行項目: `npm run dev` 或者 `cnpm run dev`;
# 修改style標(biāo)簽
將項目中的組件文件中的style標(biāo)簽上添加上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";
# 問題
運(yùn)行npm? run dev后出現(xiàn)以下問題
* !!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
原因:缺少依賴
執(zhí)行命令:
cnpm install stylus-loader css-loader style-loader --save-dev
在再次行項目:
npm run dev