Vue.js中引入样式文件的方法
发布于 2020-2-26|
复制链接
摘记: 一、在vue中使用scss首先进行安装如下依赖:
```javascript
cnpm i sass-loader node-sass -D
```
二、vue中引入样式文件1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式:
```javascript
..
一、在vue中使用scss首先进行安装如下依赖:
```javascript
cnpm i sass-loader node-sass -D
```
二、vue中引入样式文件1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式:
```javascript
2imis
```
2)在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入。这里会对scss文件进行解析,将对应的css代码插入生成html文件的style标签中,成为内联样式。
```javascript
import Vue from 'vue'
import App from './App'
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({
router,
render: h => h(App)
}).$mount('#app');
```