webpack使用加载器来加载CSS样式

灰太狼 2023-10-18 09:46 18阅读 0赞

### 前言： ###

对于webpack来说，每个文件都是一个模块，比如css、js、html、jpg等。

对于不同的模块，就得需要不同的加载器(Loaders)来处理，所以加载器是webpack最重要的功能。

安装不同的加载器就可以对不同的后缀名的文件进行处理，比如现在要写一些CSS样式，就要用到style-loaedr和css-loader。

项目举例搭建教程：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/83012059][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83012059]

### 安装style-loader和css-loader: ###

进入到你的项目目录，并在此目录下打开cmd

下面通过npm 来安装它们。

输入：

npm install css- loader --save-dev

![Image 1][]![70][]

再输入：

npm install style-loader --save-dev

![Image 1][]![70 1][]

安装完成后，在webpack.config.js文件 里配置Loader，增加对.css文件的处理：

在module对象的rules属性中可以指定一系列的loaders，每一个loader都必须包含test和use两个选项。

当webpack在编译过程中遇到require()或者import语句导入一个后缀为.css的文件时，先将它通过css-loader转换，再通过style-loader转换，然后才打包。

use选项这里是数组，它的编译顺序是从后往前，也可以是字符串。

在项目目录下新建一个style的文件，并在main.js中导入。

style.css

#app{
     font-size:24px;
     color:#f50;
    }

main.js

import './style.css';

执行:

npm run dev

![70 2][]

就可以看到页面中的文字已经改变了样式。

![70 3][]

![Image 1][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83012059]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83012059
[Image 1]: 
[70]: https://img-blog.csdn.net/20181016131714965?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181016131736696?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20181016131943990?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20181016131947543?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70