vue动态切换css文件_Vue(5)： APP.vue引入CSS样式文件和动态切换组件的方法

1.vue文件引入css样式

刚开始写的时候代码量比较小 ，越到后面代码量越大，这样css样式也就会越大，代码不仅不美观，而且也违背了模块化的道理。

以APP.vue文件为例，如何引入css文件。试过很多方法，但感觉都没有成功，偶然发现两篇博主的文章，结合了一下，发现成功了。下面具体介绍一下如何引入。

首先在终端中安装

cnpm install style-loader --save-dev

cnpm install css-loader --save-dev

cnpm install stylus-loader --save-dev

安装完成后，打开项目的build文件夹中的webpack.base.js文件夹，在module中的rules中添加

{

test: /\.css$/,

include: [

/src/, //表示在src目录下的css需要编译

'/node_modules/element-ui/lib/' //增加此项

],

loader: 'style-loader!css-loader',

},

个人测试了一下，不需要这段代码也可以运行，但网上很多都说要添加，为了以防万一，先添加上，添加完成后保存，打开App.vue(我是以这个vue文件为例，如果要在其他文件中引入，道理一样)，我在src文件夹下面新建了一个css文件夹，导入css文件即可。

/* 引入css样式 */

@import './css/App.