Vue中引入样式文件的方法
在 Vue 项目中，引入样式文件是一个非常重要的步骤，直接影响到项目的视觉效果和用户体验。在本文中，我们将详细介绍 Vue 中引入样式文件的方法，以及一些需要注意的细节。
一、使用 Sass 在 Vue 中引入样式文件
在 Vue 项目中，我们可以使用 Sass 预处理器来编写样式文件。我们需要安装必要的依赖项，包括 `sass-loader` 和 `node-sass`。使用以下命令安装依赖项：
`cnpm i sass-loader node-sass -D`
安装完成后，我们可以在 Vue 项目中使用 Sass 编写样式文件。
二、在 index.html 模板文件中引入样式文件
在 index.html 模板文件中，我们可以使用 `<link>` 标签引入外部的样式文件。这种方式引入的样式文件将被编译到生成的 HTML 文件中。如果我们想要通过 `<link>` 标签引入外部的样式文件，这种方式是非常适合的。
以下是一个简单的示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2imis</title>
<link rel="stylesheet" href="./static/reset.css" rel="external nofollow" >
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
```
三、在入口 JS 文件中引入样式文件
在入口 JS 文件中，我们可以使用 `import` 语句引入公共的样式文件。这种方式引入的样式文件将被解析，并将对应的 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')
```
四、在模板文件中引入样式文件
在模板文件中，我们可以使用 `import` 语句引入样式文件。但是，我们需要注意，如果不在入口 JS 文件中引入样式文件，而直接在模板文件中引入，那么将不会对 SCSS 文件进行解析，可能会引发问题。
在 Vue 中引入样式文件有多种方法，我们需要根据实际情况选择合适的方法。同时，我们也需要注意一些细节，以确保样式文件的正确引入和解析。
