贵阳网站建设蜜蜂,湘潭网站优化,网站数据库网络错误,玉溪网站制作CSS-LOADER配置详解 前注#xff1a; 文档全文请查看 根目录的文档说明。 如果可以#xff0c;请给本项目加【Star】和【Fork】持续关注。 有疑义请点击这里#xff0c;发【Issues】。 1、概述 对于一般的css文件#xff0c;我们需要动用三个loader#xff08;是不是觉得好… CSS-LOADER配置详解 前注 文档全文请查看 根目录的文档说明。 如果可以请给本项目加【Star】和【Fork】持续关注。 有疑义请点击这里发【Issues】。 1、概述 对于一般的css文件我们需要动用三个loader是不是觉得好麻烦 1、css-loader 先附上官网文档中文的链接css-loader文档。 不过说实话这个官方文档讲的很糟糕看的人一脸懵逼。 css-loader主要用于处理图片路径其实也包括例如导入css文件的路径并且会将css样式打包进js文件中以模块的形式打包导入 但问题在于他不会将这些代码插入html中因此还需要通过例如style-loader来实现将打包好的css代码插入html文件中。 2、style-loader 同样先附上官网文档中文的链接style-loader文档 基本用法 用于将 css-loader 打包好的css模块插入到html文件中变成一个 style标签 3、file-loader file-loader文档 基本用法 用于处理各种资源文件一般是图片不然图片是没办法被同时打包的。 2、css-loader配置详解 先吐槽一波中文文档里的说明真的是描述的一点都不清楚。 2.1、root 名称类型默认值描述 root {String} / 解析 URL 的路径以 / 开头的 URL 不会被转译 官方文档里对这个解释不够严谨。 首先假如不设置设个属性如果理解为以 / 开头的url不会被转译从结果来看也不算错 然而假如设置这个属性的话那么就不一样了。 在面对图片路径时这个属性有三种情况 当不设置这个属性的时候css-loader不会去解析以/开头的图片路径也不会报错当设置这个属性的时候即使你设置其值为默认值 /css-loader也会去尝试解析这个路径如果找不到对应的图片会报错当设置这个属性的值为非默认值和【2】中的行为是一样的css-loader去尝试解析这个路径如果找到图片则正常解析找不到会报错当设置这个属性时是指当url以 /为开头时到底去找哪里的文件夹作为解析以 /为开头的url路径的文件 当面对css文件路径时即在css文件里通过 import 引入css文件时这个是不对css文件的路径生效的即使找不到也不会报错。 示例 文件树 根目录
|-- src
| |-- app.js
| |-- src
| |-- logo.png
|
|-- static
| |-- abc.png
|
|-- webpack.config.js 那么在 webpack.config.js 里配置的时候应该这么写root: __dirname /static/。 __dirname 表示根目录的绝对路径。假如根目录的路径是 D:/abc/def那么 __dirname 就表示 D:/abc/def 而 __dirname /static/ 则表示 D:/abc/def/static 这就是告诉 css-loader 遇见 / 开头的url路径你应该去 D:/abc/def/static 这个路径下去找文件。 2.2、 名称类型默认值描述 url {Boolean} true 启用/禁用 url() 处理 首先我们已知css-loader 正常会解析css属性里的图片url路径例如 background: url(/logo.png) 里面的值。 那么假如某图片不在你的工程里而是在服务器上。 而你是可以预知打包后的html文件和这个图片的相对路径关系你就可以直接写那个时候的路径并将url设置为false。 但是如果设置为false那么所有url都不会进行转义了也不会触发file-loader自然也不会报错即使图片不存在。 示例 假如打包后上传到服务器的目录为 dist
|-- app.js
|-- logo.png 那么你如果想引用 logo.png 那么把 url 设置为 false 之后然后路径这么写就行了 background: url(./logo.png)。 2.3、alias 名称类型默认值描述 alias {Object} {} 创建别名更容易导入一些模块 说实话我自己捣鼓了半天也没彻底搞明白其原理但是琢磨出來一些用法 1、对图片路径生效 假如文件结构 根目录
|--static
| |-- logo.png
|-- webpack.config.js 解释 已知 图片放在 /static 目录下 已知不确认css文件放在哪里因为模块化方便移动所以可能更改模块的目录结构 需求我想要确保我的css文件必然能引用到这个图片即使更改模块的文件路径也不影响不需要我二次去修改 行动那么添加 css-loader 的属性设置如下alias: {: __dirname /static/} ; 行动在css文件里图片如下引用 background: url(~/logo.png) 结果我就可以确保必然css文件必然能引用到这个图片了 注意 前要加 ~ 让 webpack 识别~ 是 webpack 负责识别认为是根目录而 是 css-loader 负责2、对 import 引入的css文件无效 假如文件结构 根目录
|--static
| |-- style.css
| |-- foo.css
|-- webpack.config.js 解释 文件目录结构如上在 style.css 如果通过 import ~/foo.css 来导入即使在 webpack.config.js 里这么设置 alias: {: __dirname /src/style/} 也是没有用的3、解决场景 这个可以应用的场景挺多不过现在很多是通过webpack的别名通用配置来解决 css文件和图片文件分离也可以分类摆放图片例如开头的是风景类图片peopel开头的是人物图片记得在别名之前加一个波浪线~让webpack识别否则无法正常工作 2.4、import 名称类型默认值描述 import {Boolean} true 启用/禁用 import 处理 假如你通过import导入的是某个打包后工程所在位置的css文件即该文件不在打包前的工程里例如CDN那么这个就有用表现效果import导进来的css没有被打包只是单纯的引入了该import代码被直接放在style标签里你可以查看dist/index.html的style标签来深刻了解这里给一个简单的示例 webpack打包前 // foo.css
import http://abc.com/m.css webpack打包后 // html文件假设使用了style-loader把css通过style标签插入
style
import http://abc.com/m.css
/style 2.5、minimize 名称类型默认值描述minimize{Boolean|Object}false启用/禁用 压缩这个很好理解原本写css文件的时候我们各种换行空格这个改为true之后换行和空格就去掉了一般开发的时候取环境变量当环境变量为生产环境的时候设置为true开发环境的时候设置为false关于生产环境的配置可以查看参考示例搜索 minimize 即可压缩前代码 * {margin: 0;border: 0;padding: 0;
}.box {border-radius: 150px;
} 压缩后代码 *{margin:0;border:0;padding:0}.box{border-radius:150px} 2.6、sourceMap 名称类型默认值描述sourceMap{Boolean}false启用/禁用 Sourcemap 在 minimize 设置为 true 后css代码被压缩了那么如果我们要调试的话就很麻烦当 sourceMap 设置为 true 后通过Chrome控制台的 Sources 标签在左边栏上面选 Sources 可以在树结构的 (no domain) 里查看到压缩后和压缩前的CSS代码即使 minimize 没有设置为 true 不压缩由于css代码被扔到了js里因此也是无法直接查看我们写的css代码的但是 sourceMap 设置为true后就可以通过【2】中描述的途径来查看我们写的css代码启用 sourceMap 压缩前的代码 启用 sourceMap 压缩后的代码 2.7、importLoaders 名称类型默认值描述importLoaders{Number}{Number}在 css-loader 前应用的 loader 的数量说实话加不加这个感觉没啥区别我还专门研究了一波postcss和autoprefixer让他生效。 见我关于postcss的配置为了正常运行我在项目里webpack把这个注释掉了可以取消掉注释 // importLoaders: 0 // 感觉没什么用 如果有见解欢迎指正 2.8、modules等 名称类型默认值描述说明 modules {Boolean} false 启用/禁用 CSS 模块 1、初步理解这个相当于把css视为模块。例如我有一个css文件 foo.css 然后里面有一个类 .bar我可以在js文件里通过 import foo from ./foo.css导入这个css文件 2、在打包后foo.css里的类 .bar 会变成具有唯一性的一个字符串举个例子假设他变成了abcdefg 3、假如我在html里使用的是classbar那么显然是无法正常生效的bar被转为了abcdefg 4、那么我可以使用变量foo.bar在js这里这是一个变量赋给原本使用classbar的这个DOM节点 5、由于是变量所以他的值事实上已经被css-loader转为了abcdefg可以正常运行了 6、推荐阮一峰的博客CSS Modules 用法教程 camelCase{Boolean|String}false以驼峰化式命名导出类名 1、这个需要结合modules来看在modules设置为true时我们可以通过变量名来获取更名后的css类名 2、但我们写css类名的时候一般是例如foo-bar这种写法在js里显然不合适 3、因此把这个启用为true我们就可以使用fooBar这种驼峰式写法了方便js引用localIdentName{String}[hash:base64]配置生成的标识符(ident) 1、这个也是跟modules相关的用于对原本混算复杂不具有可读性的类名进行重命名 2、我觉得这个文章讲这个比较好你真的知道 css-loader 怎么用吗搜索关键词localIdentName 这三个是一起使用的的见表格内容吧。 3、项目地址 https://github.com/qq20004604/webpack-study/tree/master/5%E3%80%81Loader/css_loader 请 Star 和 fork 到本地后注意相关配置。
