网站从哪些方面来做,河北建设厅网站技术电话,怎么找关键词,建设电子商城网站概述 在开发 Web 应用时#xff0c;我们通常需要编写大量 JavaScript 代码 —— 用于控制页面逻辑#xff1b;编写大量 CSS 代码 —— 用于调整页面呈现形式。问题在于#xff0c;CSS 语言在过去若干年中一直在追求样式表现力方面的提升#xff0c;工程化能力薄弱#xff…概述 在开发 Web 应用时我们通常需要编写大量 JavaScript 代码 —— 用于控制页面逻辑编写大量 CSS 代码 —— 用于调整页面呈现形式。问题在于CSS 语言在过去若干年中一直在追求样式表现力方面的提升工程化能力薄弱例如缺乏成熟的模块化机制、依赖处理能力、逻辑判断能力等。为此在开发现代大型 Web 应用时通常会使用 Webpack 配合其它预处理器编写样式代码 我们看下Webpack 中如何使用 CSS 代码处理工具包括 如何使用 css-loader、style-loader、mini-css-extract-plugin 处理原生 CSS 文件如何使用 Less/Sass/Stylus 预处理器如何使用 PostCSS
Webpack 如何处理 CSS 资源
原生 Webpack 并不能识别 CSS 语法假如不做额外配置直接导入 .css 文件会导致编译失败 为此在 Webpack 中处理 CSS 文件通常需要用到 css-loader该 Loader 会将 CSS 等价翻译为形如 module.exports ${css} 的JavaScript 代码使得 Webpack 能够如同处理 JS 代码一样解析 CSS 内容与资源依赖 style-loader该 Loader 将在产物中注入一系列 runtime 代码这些代码会将 CSS 内容注入到页面的 style 标签使得样式生效 mini-css-extract-plugin该插件会将 CSS 代码抽离到单独的 .css 文件并将文件通过 link 标签方式插入到页面中。 PS当 Webpack 版本低于 5.0 时请使用 extract-text-webpack-plugin 代替 mini-css-extract-plugin。 三种组件各司其职css-loader 让 Webpack 能够正确理解 CSS 代码、分析资源依赖style-loader、mini-css-extract-plugin 则通过适当方式将 CSS 插入到页面对页面样式产生影响 下面我们先从 css-loader 聊起css-loader 提供了很多处理 CSS 代码的基础能力包括 CSS 到 JS 转译、依赖解析、Sourcemap、css-in-module 等基于这些能力Webpack 才能像处理 JS 模块一样处理 CSS 模块代码。接入时首先需要安装依赖$ yarn add -D css-loader 之后修改 Webpack 配置定义 .css 规则 module.exports {module: {rules: [{test: /\.css$/i,use: [css-loader],},],},
};此后执行 npx webpack 或其它构建命令即可。经过 css-loader 处理后样式代码最终会被转译成一段 JS 字符串
源码转译后.main-hd { font-size: 10px; } //... var ___CSS_LOADER_EXPORT___ _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default())); // Module ___CSS_LOADER_EXPORT___.push([ module.id, .main-hd {\n font-size: 10px;\n}, ]); // Exports /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ (___CSS_LOADER_EXPORT___); //... 但这段字符串只是被当作普通 JS 模块处理并不会实际影响到页面样式后续还需要 开发环境使用 style-loader 将样式代码注入到页面 style 标签生产环境使用 mini-css-extract-plugin 将样式代码抽离到单独产物文件并以 link 标签方式引入到页面中。 经过 css-loader 处理后CSS 代码会被转译为等价 JS 字符串但这些字符串还不会对页面样式产生影响需要继续接入 style-loader 加载器。 与其它 Loader 不同style-loader 并不会对代码内容做任何修改而是简单注入一系列运行时代码用于将 css-loader 转译出的 JS 字符串插入到页面的 style 标签。接入时同样需要安装依赖$ yarn add -D style-loader css-loader 之后修改 Webpack 配置定义 .css 规则 module.exports {module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},
};PS注意保持 style-loader 在前css-loader 在后 上述配置语义上相当于 style-loader(css-loader(css)) 链式调用执行后样式代码会被转译为类似下面这样的代码 // Part1: css-loader 处理结果对标到原始 CSS 代码
const __WEBPACK_DEFAULT_EXPORT__ (
body {\n background: yellow;\n font-weight: bold;\n}
);
// Part2: style-loader 处理结果将 CSS 代码注入到 style 标签
injectStylesIntoStyleTag(__WEBPACK_DEFAULT_EXPORT__
)至此运行页面触发 injectStylesIntoStyleTag 函数将 CSS 代码注入到 style 标签样式才真正开始生效。例如
index.cssindex.jsbody { background: yellow; font-weight: bold; } import ./index.css; const node document.createElement(span); node.textContent Hello world; document.body.appendChild(node);
页面运行效果 经过 style-loader css-loader 处理后样式代码最终会被写入 Bundle 文件并在运行时通过 style 标签注入到页面。这种将 JS、CSS 代码合并进同一个产物文件的方式有几个问题 JS、CSS 资源无法并行加载从而降低页面性能资源缓存粒度变大JS、CSS 任意一种变更都会致使缓存失效。 因此生产环境中通常会用 mini-css-extract-plugin 插件替代 style-loader将样式代码抽离成单独的 CSS 文件。使用时首先需要安装依赖$ yarn add -D mini-css-extract-plugin之后添加配置信息const MiniCssExtractPlugin require(mini-css-extract-plugin)
const HTMLWebpackPlugin require(html-webpack-plugin)module.exports {module: {rules: [{test: /\.css$/,use: [// 根据运行环境判断使用那个 loader(process.env.NODE_ENV development ?style-loader :MiniCssExtractPlugin.loader),css-loader]}]},plugins: [new MiniCssExtractPlugin(),new HTMLWebpackPlugin()]
}这里需要注意几个点 mini-css-extract-plugin 库同时提供 Loader、Plugin 组件需要同时使用 mini-css-extract-plugin 不能与 style-loader 混用否则报错所以上述示例中第 9 行需要判断 process.env.NODE_ENV 环境变量决定使用那个 Loader mini-css-extract-plugin 需要与 html-webpack-plugin 同时使用才能将产物路径以 link 标签方式插入到 html 中 至此运行 Webpack 后将同时生成 JS、CSS、HTML 三种产物文件如
index.cssindex.jsbody { background: yellow; font-weight: bold; } import ./index.css; const node document.createElement(span); node.textContent Hello world; document.body.appendChild(node); 产物 main.css产物 main.js产物 index.html!DOCTYPE html html head meta charsetutf-8 titleWebpack App/title meta nameviewport contentwidthdevice-width, initial-scale1 script defer srcmain.js/script link hrefmain.css relstylesheet /head body /body /html 可以看到样式代码会被抽离到单独的 CSS 文件并且在最终生成的 html 中包含了指向 JS、CSS 两种资源的标签 script defer srcmain.js/script
link hrefmain.css relstylesheet综上在 Webpack 中处理 CSS通常需要使用 css-loader style-loader 或 css-loader mini-css-extract-plugin 组合两种方式最终都能实现加载样式代码的效果。但鉴于原生 CSS 语言的种种缺陷我们还可以在此基础上增加更多 Webpack 组件更优雅、高效地编写页面样式下面一一展开介绍。
使用预处理器 CSS —— Cascading Style Sheet-级联样式表最初设计用于描述 Web 界面样式的描述性语言经过这么多年的发展其样式表现力已经突飞猛进但核心功能、基本语法没有发生太大变化至今依然没有提供诸如循环、分支判断、扩展复用、函数、嵌套之类的特性以至于原生 CSS 已经难以应对当代复杂 Web 应用的开发需求。 为此社区在 CSS 原生语法基础上扩展出一些更易用功能更强大的 CSS 预处理器(Preprocessor)比较知名的有 Less、Sass、Stylus 。这些工具各有侧重但都在 CSS 之上补充了扩展了一些逻辑判断、数学运算、嵌套封装等特性基于这些特性我们能写出复用性、可读性、可维护性更强条理与结构更清晰的样式代码以 Less 为例 // 变量
size: 12px;
color: #006633;// 混合
.mx-bordered() {border: 1px solid #000;
}// 嵌套
body {// 函数计算background: spin(lighten(color, 25%), 8);font-weight: bold;padding: size;.main {// 数学运算font-size: size * 2;.mx-bordered;color: darken(color, 10%);padding: size * 0.6;}
}在 Webpack 中只需使用适当 Loader 即可接入预处理器以 Less 为例首先安装依赖$ yarn add -D less less-loader 其次修改 Webpack 配置添加 .less 处理规则 module.exports {module: {rules: [{test: /\.less$/,use: [style-loader,css-loader,less-loader]}]}
}可以看到这里需要同时使用三种 Loader其中 less-loader 用于将 Less 代码转换为 CSS 代码上述示例转换结果
.less 源码less-loader 处理结果// 变量 size: 12px; color: #006633; // 混合 .mx-bordered() { border: 1px solid #000; } // 嵌套 body { // 函数计算 background: spin(lighten(color, 25%), 8); font-weight: bold; padding: size; .main { // 运算 font-size: size * 2; .mx-bordered; color: darken(color, 10%); padding: size * 0.6; } } body { background: #00e691; font-weight: bold; padding: 12px; } body .main { font-size: 24px; border: 1px solid #000; color: #00331a; padding: 7.2px; }
这段 CSS 随后会被 css-loader 与 style-loader 处理最终在页面生效。
目前社区比较流行的预处理器框架有Less、Sass、Stylus它们接入 Webpack 的方式非常相似
LessSassStylus安装依赖yarn add -D less less-loader yarn add -D sass sass-loader yarn add -D stylus stylus-loader 添加配置module.exports { module: { rules: [ { test: /\.less$/, use: [ style-loader, css-loader, less-loader ], }, ], } }; module.exports { module: { rules: [ { test: /\.s(ac)ss$/, use: [ style-loader, css-loader, sass-loader ], }, ], } }; module.exports { module: { rules: [ { test: /\.styl$/, use: [ style-loader, css-loader, stylus-loader ], }, ], } };
大家可根据项目背景选择接入适当的预处理器框架
使用 post-css 与上面介绍的 Less/Sass/Stylus 这一类预处理器类似PostCSS 也能在原生 CSS 基础上增加更多表达力、可维护性、可读性更强的语言特性。两者主要区别在于预处理器通常定义了一套 CSS 之上的超集语言PostCSS 并没有定义一门新的语言而是与 babel/core 类似只是实现了一套将 CSS 源码解析为 AST 结构并传入 PostCSS 插件做处理的流程框架具体功能都由插件实现。 预处理器之于 CSS就像 TypeScript 与 JavaScript 的关系而 PostCSS 之于 CSS则更像 Babel 与 JavaScript。 PostCSS 的接入步骤也很简单首先安装依赖$ yarn add -D postcss postcss-loader 之后添加 Webpack 配置 module.exports {module: {rules: [{test: /\.css$/,use: [style-loader, css-loader, postcss-loader],},],}
};不过这个时候的 PostCSS 还只是个空壳下一步还需要使用适当的 PostCSS 插件进行具体的功能处理例如我们可以使用 autoprefixer 插件自动添加浏览器前缀首先安装依赖$ yarn add -D autoprefixer 之后修改 Webpack 配置 module.exports {module: {rules: [{test: /\.css$/,use: [style-loader, {loader: css-loader, options: {importLoaders: 1}}, {loader: postcss-loader,options: {postcssOptions: {// 添加 autoprefixer 插件plugins: [require(autoprefixer)],},},}],},],}
};之后再次运行 Webpack 即可为 CSS 代码自动添加浏览器前缀例如
CSS 源码PostCSS 处理结果::placeholder { color: gray; } ::-moz-placeholder { color: gray; } :-ms-input-placeholder { color: gray; } ::placeholder { color: gray; }
此外还可以选择将 PostCSS 相关配置抽离保存到 postcss.config.js 文件
postcss.config.jswebpack.config.jsmodule.exports { plugins: [ require(autoprefixer) ], }; module.exports { module: { rules: [ { test: /\.css$/, use: [ style-loader, { loader: css-loader, options: { importLoaders: 1 } }, postcss-loader ], }, ], } }; 值得一提的是PostCSS 与预处理器并非互斥关系我们完全可以在同一个项目中同时使用两者例如 module.exports {module: {rules: [{test: /\.less$/,use: [style-loader, {loader: css-loader, options: {importLoaders: 1}}, postcss-loader,less-loader],},],}
};基于这一特性我们既能复用预处理语法特性又能应用 PostCSS 丰富的插件能力处理诸如雪碧图、浏览器前缀等问题。 PostCSS 最大的优势在于其简单、易用、丰富的插件生态基本上已经能够覆盖样式开发的方方面面。实践中经常使用的插件有 autoprefixer基于 Can I Use 网站上的数据自动添加浏览器前缀postcss-preset-env一款将最新 CSS 语言特性转译为兼容性更佳的低版本代码的插件postcss-less兼容 Less 语法的 PostCSS 插件类似的还有postcss-sass、poststylusstylelint一个现代 CSS 代码风格检查器能够帮助识别样式代码中的异常或风格问题
总结 本文介绍 css-loader、style-loader、mini-css-extract-plugin、less-loader、postcss-loader 等组件的功能特点与接入方法内容有点多重点在于 Webpack 不能理解 CSS 代码所以需要使用 css-loader、style-loader、mini-css-extract-plugin 三种组件处理样式资源 Less/Sass/Stylus/PostCSS 等工具可弥补原生 CSS 语言层面的诸多功能缺失例如数值运算、嵌套、代码复用等 这些工具几乎已经成为现代 Web 应用开发的标配能够帮助我们写出更清晰简洁、可复用的样式代码帮助我们解决诸多与样式有关的工程化问题
