vue引入外部css

```html

```

2. 使用@import引入外部CSS文件

在Vue的CSS文件中，可以使用`@import`语句引入外部的CSS文件。将CSS文件放在`src/assets`目录中，并在Vue组件的CSS文件中加入以下代码：

```css

@import url('../assets/style.css');

```

3. 使用Vue插件style-resources-loader

`style-resources-loader`是一个Vue插件，可以在Vue组件中直接引入外部的CSS文件。首先，需要安装该插件：

```bash

npm install style-resources-loader --save-dev

```

然后，在`vue.config.js`文件中配置该插件：

```javascript

const path = require('path');

module.exports = {

chainWebpack: config => {

config.module

.rule('scss')

.oneOf('vue')

.use('style-resource')

.loader('style-resources-loader')

.options({

patterns: [

path.resolve(__dirname

'./src/assets/*.scss')

// 替换为外部CSS文件的路径

]

});

}

}

```

*，在Vue组件中就可以直接引入外部的CSS文件了：

```html

```

无论使用哪种方法，都可以将外部的CSS样式应用到Vue组件中。这样可以更好地管理和复用CSS代码，减少代码冗余，提高开发效率。