前言使用web包构建前端项目时，应使用sass-loader、less-loader、postcss-loader、css-loader和style-loader 本文主要阐述css-loader和style-loader的作用和实现，加深对loader的理解。
css-loader css-loader处理@import和url ) )，缺省情况下生成数组，以便js分析import/require )，并存储和导出处理后的样式字符串。
如果有三种样式文件： a.module.scss、b.module.scss和c.module.scss，则它们的依赖关系如下：
//a.module.scss @ import ‘./b.module.scss ‘； container { width: 200px； 高： 200 px； 背景色： antique white； //b.module.scss @ import URL (./c.module.scss )； text { font-size: 16px； color: #da2227； 字体权重： bold； //c.module.scss.name { font-size 336016 px； color: #da7777； 字体权重： bold； 将它们引入index.jsx文件
//index.jsximportreactfrom ‘ react ‘； importstylesfrom ‘./a.module.scss ‘； const Index=() ) returndivclassname=) styles.container ) span class name={ styles.text } span class name={ styles.tete } ！/span/div }导出默认索引； web包. config.js构建脚本
//web pack.config.jsconstpath=require (‘ path )； const { cleanwebpackplugin }=require (clean-web pack-plugin )； 常数网络包=请求(网络包)； module.exports={ entry : } index : ‘./src/index.jsx ‘ }，output : { filename 3360 ‘ js/[ name ].js ‘ ‘ 库目标： ‘ UMD ‘，}，resolve 3360 { extensions : [ ‘.js ‘，} module : (rules : (test :/(.) js use: [ ‘style-loader ‘，{ loader: ‘css-loader ‘，options: { modules: false，//CSSmodules禁止}，’ SAS use: [‘url-loader’] } ] }，plugins 3360 [ new web pack.progress plugin ] ]，newCCD
//babe LRC { ‘ presets ‘ : [ ‘ @ babel/preset-env ‘，’ @babel/preset-react’ ]，’ plugins’:[‘@babel] 为了便于分析构建后的代码，此处将模式设置为none。
运行yarn build:dev构建并分析生成的文件
(1) a.module.scss使用@import引入b.module.scss，生成同一个模块的数组___CSS_LOADER_EXPORT___
)2) b.module.scss是@import url ) )引入了c.module.scss，而c.module.scss是放在另一个模块中的数组_ _ CSS _ loader _
) a.module.scss和b.module.scss单独处理一个模块数组，c.module.scss单独处理放在另一个模块中的数组，但b.module.scss和c.module .
a.module.scss和b.module.scss引入模块id为12的数组，c.module.scss引入模块id为15的数组，模块id为12的模块引入模块id为15的模式数组
另外，css-loader还提供css modules等其他功能
css-loader处理到这一步就结束了
上面引入的所有样式都将转换为样式字符串并放入模块数组中。 这是默认的处理方法，但其实还有其他两种。
如果设置了项目导出类型，则导出样式为“阵列”、“字符串”或“css-style-sheet”可构建样式，即CSSStyleSheet。 默认值为“阵列”
CSSStyleSheet接口表示CSS样式表，允许您检查和编辑样式表中的规则列表。 从父类型StyleSheet继承属性和方法。
CSS样式表包含一组表示规则的CSSRule对象。 每个CSS规则都可以从与其关联的对象进行操作。 这些规则包含在CSSRuleList中，可从样式表的cssRules (en-US )属性获取。
例如，CSSStyleRule对象的规则可能包含以下样式：
h1，h2 { font-size: 16pt； }样式加载器样式加载器的作用是将CSS插入到DOM中。 也就是说，它处理css-loader导出的模块数组，并将样式以style标记或其他格式插入DOM中。
通过设置项目injectType，可以设置将styles插入DOM的方式。
如果想开发小程序，或者想了解更多小程序的内容，可以通过专业的开发公司来实现开发需求。 厦门很在意技术。 专注厦门小程序开发、APP开发、网站开发、H5小游戏开发
