02、webpack使用css文件的配置

11 阅读1分钟

loader

loader是webpack的核心

webpack可以用来做什么?

1、之前的例子中,都是使用webpack处理js代码,且webpack会自动处理js之间相关的依赖

2、但是 ,在开发中,我们不仅有js,还有css, .vue文件转为js文件 ,ES5 等等 ;不过webpack本身是无法支持这些转化的

3、那么此时我们就需要使用 loader

配置

1、安装

image.png

有版本问题,一定要对应上

2、配置

(在 webpack.config.js中进行配置,写在module.exports里面 image.png

3、创建文件

image.png

image.png

4、引入文件

image.png

把文件引入到入口文件 (main.js

5、打包

image.png

6、展示页面

没有报错,但也没有将页面改变颜色

因为 css-loader只负责将css文件进行加载,而不负责进行解析

如果,想让它生效,那么得安装 style-loader

style-loader : 将模块导出作为样式添加到DOM中

7、下载

image.png (也要找到和此webpack版本对应的style-loader版本号)

8、配置

image.png

(别忘记再打包一次)