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

前言：

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

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

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

项目举例搭建教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83012059

安装style-loader和css-loader:

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

下面通过npm 来安装它们。

输入：

npm install css- loader --save-dev

再输入：

npm install style-loader --save-dev

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

var path = require('path');
var config = {entry:{main:'./main'},output:{path:path.join(__dirname,'./dist'),publicPath:'/dist/',filename:'main.js'},module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']}]}};module.exports = config;

在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

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

webpack使用加载器来加载CSS样式相关推荐

java spring包_java 自定义加载器，加载spring包，动态加载实现，jar包隔离，tomcat加载webapp方式...
java 自定义加载器,加载spring包,动态加载实现,jar包隔离,tomcat加载webapp方式发布时间:2018-08-20 12:02, 浏览次数:774 , 标签: java spri ...
【OS学习笔记】十实模式:实现一个程序加载器-程序加载器如何将用户程序加载到内存并执行
上一篇文章学习了以下内容: 用一种不同的分段方法,从另一个不同的的角度理解处理器的分段内存访问机制使用循环和条件转移指令来优化主引导扇区代码点击链接查看上一篇文章:点击链接查看对于主引导扇区部分 ...
需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改比如我们在初识web ...
webpack-loader（加载器）
加载器是用于资源文件的转换. 加载器就是以资源文件作为入参并返回新的资源的函数(在Node.js中运行). 例子例如,您可以使用加载器告诉webpack加载CSS文件或TypeScript文件,并将 ...
android 加载器loader详解
Loaders loader在android 3.0之后才被引入,它简化了在activity和fragment中异步加载数据的步骤(个人认为简化是次要的,更重要的是优雅的实现了异步加载),loa ...
AMD加载器实现笔记(四)
继续这一系列的内容,到目前为止除了AMD规范中config的map.config参数外,我们已经全部支持其他属性了.这一篇文章中,我们来为增加对map的支持.同样问题,想要增加map的支持首先要知道m ...
Activity中加载器的总结
继续总结加载器加载器可以支持在Activity或片段中异步加载数据,加载器具有以下特征: 可用于每个Activity和Fragment: 支持异步加载数据: 监控其数据源并在内容变化时传递新结果: ...
amba simple class驱动_学习笔记：class加载器和双亲委派模型
类加载器类加载器有四种启动类加载器(Bootstrap ClassLoader) 负责加载 JAVA_HOMElib ⽬录中的,或通过-Xbootclasspath参数指定路径中的且被虚拟机认可( ...
Day18 （一）类的加载器
一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这个虚拟机实例也就随之消亡. 如果在同一台计算机上同时运行多个Java程序 ...

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

前言：

安装style-loader和css-loader:

webpack使用加载器来加载CSS样式相关推荐

最新文章

热门文章