详解webpack和webpack-simple中如何引入css文件

webpack与webpack-simple CSS引入差异概述

博主最近在研究Vue结合Webpack时，发现CSS文件始终无法成功引入，但在webpack-simple模板中却能正常加载，这让人感到困惑。经过仔细调试后发现，这两种模板在引入CSS文件的方式上存在显著区别。

标准webpack项目CSS配置指南

首先介绍如何在标准webpack项目中引入CSS文件。博主使用的是最新版本，具体为2.0及以上版本（1.0版本的配置方式可能不同）。在命令行中创建Vue项目后（新建步骤可参考博主之前的文章），由于webpack本身已内置css-loader，因此无需再次安装该模块，只需额外下载style-loader即可。在命令行中进入项目目录，执行npm install style-loader --save-dev命令，--save-dev参数表示将依赖保存到开发环境中。随后，打开项目中的build/webpack.base.conf.js文件，在module的rules配置项中添加针对CSS的规则代码。

接下来，在App.vue文件的style标签内编写需要引入的样式代码。

本例中引入的样式文件名为nam.css，该文件的作用是将页面背景设置为蓝色。完成上述配置后运行项目即可生效。

webpack-simple模板CSS配置方法

再来看webpack-simple模板中如何引入CSS文件。从名称可以看出，这是一个简化版模板。在标准webpack中，即使不下载style-loader，也不在webpack.base.conf.js中配置前述规则，仍可通过最后一步操作轻松引入CSS样式。然而，在webpack-simple中此方法无效，因为它是简化版本，需要手动进行配置。

首先按照前述方式下载webpack-simple模板。下载完成后，在项目目录下执行npm install css-loader style-loader --save-dev命令进行安装。安装完毕后，需要在webpack.config.js文件的rules配置中添加一行CSS规则代码。

需要注意的是，use数组内的加载器顺序不能颠倒，否则会导致报错。

配置完成后，在src/assets/main.js文件中输入import 'css路径'语句即可引入样式。示例代码如下：

import './assets/blue.css'

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。