这篇文章将为大家详细讲解有关如何在webpack中加载css文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
webpack加载css文件及其配置
当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过链接标签将css文件导入进的去,但是如果我们的css文件有很多的话,一个个的导入是不推荐的;而现在我们学了webpack,我们希望的是通过打包bundle.js文件,将所有的依赖文件全部导入进去。
<李>我们要知道的是,如果在入口函数main.js文件中如果没有导入css文件,那么打包的bundle.js文件必然不会有css文件,所有我们需要让main.js文件依赖css文件。
<李>使用代码:需要(& # 39;css文件地址& # 39;)
<李>依赖完之后,我们再打包一下npm运行构建会发现报错了。错误为:你可能需要一个适当的加载程序来处理这个文件类型。意思是说你可能需要一个合适的加载程序来处理这个文件
<李>于是我们打开webpack的中文网址,在里面找到了我们需要安装css-loader和style-loader这两个加载程序。并且我们还需要在webpack.config。js文件中配置一下这些装载机
<李>于是我们使用npm下载这两个依赖,代码如下:npm安装css-loader style-loader——save-dev
<李>在webpack.config。js文件中,有一个模块的属性,该属性为一个对象,在该对象中有个规则属性,是一个数组,数组中的每一项都是处理不同文件装载机所需要的对象。代码如下:
其中测试表示我们要处理的是哪种类型的文件,使用中的每一项则是处理该类文件需要的加载程序。
注意:css-loader这个装载机的作用是用来让主要。js文件加载该css文件,而style-loader的作用是将模块的导出作为样式添加到DOM中。这里可能有人会有疑问:按这样的作用来讲的话应该先加载文件再作为样式添加到DOM中去才对,那数组中的顺序应该不是这样的。我在这里很明确的告诉你,你的想法是没有错的,只是webpack他这一点非常的奇特,它是从数组的最后一个元素,从右到左的顺序加载加载程序的。
1。行内样式,最直接最简单的一种,直接对HTML标签使用风格=啊啊?。内嵌样式,就是将css代码写在之间,并且用
<时尚>进行声明。3。外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上
<?链接就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@ import样式导入CSS样式表,不建议使用。关于如何在webpack中加载CSS文件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
