在vue中使用sass的配置的方法
1、建立一個基於 webpack 模板的新專案
1.$ vue init webpack myvue
2、在當前目錄下,安裝依賴
1. $ cd myvue
2.$ npm install
3、安裝sass的依賴包
1.npm install --save-dev sass-loader
2.//sass-loader依賴於node-sass
3.npm install --save-dev node-sass
4、在build資料夾下的webpack.base.conf.js的rules裡面新增配置
{
test: /\.sass$/, loaders: ['style', 'css', 'sass']
}
如下圖所示:
5、在APP.vue中修改style標籤
1. <style lang="scss">
6、然後執行專案
1. $ npm run dev
7、修改APP.vue的樣式,可以看下效果
8、執行結果背景變成灰色嗎,說明你已成功配置好sass
相關文章
- 在vue2.0中使用sassVue
- vue2中使用sass並配置全域性的sass樣式變數Vue變數
- 在VS Code使用Sass最新配置流程
- vue-cli 如何配置sassVue
- vue中sass與SCSS的區別VueCSS
- 在 vue-cli 腳手架中引用 jQuery、bootstrap 以及使用 sass、less 編寫 css [vue-cli配置入門]VuejQuerybootCSS
- 遨翔在知識的海洋裡----(css之vue中sass基本用法)CSSVue
- 在vue單頁面應用當中使用sassVue
- 如何在vue中使用sassVue
- lottie 動畫在 vue 中的使用動畫Vue
- swiper在vue的不使用router的使用方法Vue
- webpack+vue+sass專案中,sass提取全域性引用WebVue
- vue-router 在模組化 vue中的使用Vue
- vue-cli 配置 sass 全域性變數Vue變數
- Filter在Vue,JS,JQ中的使用FilterVueJS
- 解決vue使用Sass時候的報錯問題Vue
- vue3中mixin的使用方法Vue
- 在CentOS中安裝與配置SVN的方法CentOS
- 在vue專案中優雅的使用SvgVueSVG
- 在vue中,使用echarts的自定義主題VueEcharts
- bing Map 在vue專案中的使用Vue
- vue中methods、mounted等的使用方法解析Vue
- Vue中的template配置項Vue
- Vue中的data配置項Vue
- Sass中的mixin,function,extendFunction
- vue、rollup、sass、requirejs組成的vueManagerVueUIJS
- vue 使用jsx的配置VueJS
- toString 方法在陣列中的使用陣列
- Redis 哨兵使用以及在 Laravel 中的配置RedisLaravel
- AIX中YUM庫的配置和使用方法AI
- vue 2.0開發專案中stylus 的配置和使用Vue
- vue-cli中的webpack配置VueWeb
- vue中渲染值的方法Vue
- 在CentOS Linux 5中為oracle配置hugepage的方法CentOSLinuxOracle
- Vue中的$set的使用Vue
- 在webpack配置VueWebVue
- mpvue使用sass的解決方案Vue
- mpvue 使用sass的解決方案Vue