在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中sass與SCSS的區別VueCSS
- 在vue單頁面應用當中使用sassVue
- 遨翔在知識的海洋裡----(css之vue中sass基本用法)CSSVue
- swiper在vue的不使用router的使用方法Vue
- vue-cli 配置 sass 全域性變數Vue變數
- webpack+vue+sass專案中,sass提取全域性引用WebVue
- Filter在Vue,JS,JQ中的使用FilterVueJS
- lottie 動畫在 vue 中的使用動畫Vue
- 在 Vue 3 中配置 remVueREM
- 解決vue使用Sass時候的報錯問題Vue
- vue 使用jsx的配置VueJS
- bing Map 在vue專案中的使用Vue
- vue3中mixin的使用方法Vue
- 使用sass的方式有哪些?
- 在vue專案中優雅的使用SvgVueSVG
- vue中methods、mounted等的使用方法解析Vue
- Redis 哨兵使用以及在 Laravel 中的配置RedisLaravel
- Vue中的template配置項Vue
- Vue中的data配置項Vue
- mpvue使用sass的解決方案Vue
- mpvue 使用sass的解決方案Vue
- Hanlp在ubuntu中的使用方法介紹HanLPUbuntu
- Android Studio中的外掛ButterKnife的配置及其使用方法Android
- 在webpack配置VueWebVue
- 使用全域性 bus 在 Vue 的兄弟元件中簡單傳值(以及 this 重定向的 5 種方法)Vue元件
- vue中渲染值的方法Vue
- mybatis:在springboot中的配置MyBatisSpring Boot
- 在.net core中使用配置檔案的幾個示例和方法
- Vue-Router的使用方法Vue
- Vue元件的基本使用方法Vue元件
- 在 Create React App 中啟用 Sass 和 LessReactAPP
- vue不同環境的壓包配置方法(vue-cli 3.0)Vue
- 如何在 vue-cli v3.0 中使用 SCSS/SASSVueCSS
- axios在vue中的實踐iOSVue
- vue.nextTick()方法,在html元素上面設定ref後,在vue中使用VueHTML