vue學習記錄 vue中引入樣式檔案

2021-08-07 02:28:12 字數 775 閱讀 9575

一、在vue中使用scss

首先進行安裝如下依賴：

cnpm i sass-loader node-sass -d
二、vue中引入樣式檔案

1）在index.html模板html檔案中引入，這種方式引入的原樣編譯在生成的html檔案中，如果想要通過link引入外部的樣式檔案，建議使用這種方式：

"">
2）在入口js檔案main.js中引入，一些公共的樣式檔案，可以在這裡引入。這裡會對scss檔案進行解析，將對應的css**插入生成html檔案的style標籤中，成為內聯樣式。

import vue from


'vue


'from''


import router 


from


'./router


'import elementui 


from


'element-ui


'import 


'@/common/scss/theme-blue.scss


'vue.config.productiontip = false


vue.use(elementui);


/*eslint-disable no-new 


*/new


vue().$mount(


'');
3）在對應的模板.vue檔案中引入

難道scss檔案必須首先在入口的index.js中引入，才能將scss解析，具體的vue中依賴某乙個scss，還需要單獨再引入一次。

vue檔案引入全域性樣式導致樣式重複

通常專案中src下的子目錄都會有乙個style資料夾，專門用來存放全域性的樣式檔案。這個style資料夾下，一般有reset.css var.scss mixin.scss class.scss index.scss 一般都會在index.scss檔案中引入其他檔案做統一管理，並在main.js中引...

Vue學習記錄 初探Vue

說完了這一些，接下來的重點，就是選型了。經過一天的搜尋，最終定位到了vue 根據vue官網的引導，搭建的過程其實很簡單 1.安裝 vue npm install vue2.命令列工具 npm install global vue cli3.初始化專案 vue init webpack office ...

vue中檔案樣式的引入（ css scss）

在mian.js檔案中進行全域性引入 import vue from vue import normalize.css normalize.css a modern alternative to css resets import elementui from element ui import e...