css-loader 版本号,css-loader
css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
快速开始
如果要使用 css-loader，你需要安装 webpack@5
首先，你需要先安装 css-loader： npm install --save-dev css-loader
然后把 loader 引用到你 webpack 的配置中。如下所示：
file.js import css from "file.css";
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
然后运行 webpack。
toString
你也可以直接将 css-loader 的结果作为字符串使用，例如 Angular 的组件样式。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["to-string-loader", "css-loader"],
},
],
},
};
or const css = require("./test.css").toString();
console.log(css); // {String}
如果有 SourceMap，它们也将包含在字符串结果中。
如果由于某种原因，你需要将 CSS 提取为纯粹的 字符串资源(即不包含在 JS 模块中)，则可能需要 查看 extract-loader。 比如，当你需要对 CSS 进行后处理时，会非常有用。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
"handlebars-loader", // handlebars loader 需要原始资源字符串
"extract-loader",
"css-loader",
],
},
],
},
};
Options 名称 类型 默认值 描述 {Boolean|Function} true 启用/禁用 url()/image-set() 函数处理
{Boolean|Function} true 启用/禁用 @import 规则进行处理
{Boolean|String|Object} {auto: true} 启用/禁用 CSS 模块及其配置
{Boolean} compiler.devtool 启用/禁用生成 SourceMap
{Number} 0 启用/禁用或者设置在 css-loader 前应用的 loader 数量
{Boolean} true 使用 ES 模块语法
url
类型: Boolean|Object 默认值: true
启用/禁用 url/image-set 函数进行处理。 如果设置为 false，css-loader 将不会解析 url 或者 image-set 中的任何路径。 还可以传递给一个函数基于资源的路径动态地控制这种行为。 绝对路径和根目录的相对 URL 现在会被解析(版本 4.0.0。
示例解决方案: url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')
要从 node_modules 目录(包括 resolve.modules)导入资源，而对于 alias，请加上一个前缀 ~： url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')
Boolean
启用/禁用 url() 解析。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
url: true,
},
},
],
},
};
Object
允许过滤 url()。所有过滤的内容 url() 都不会解析(保留编写时的代码)。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
url: {
filter: (url, resourcePath) => {
// resourcePath - css 文件的路径
// 不处理 `img.png` url
if (url.includes("img.png")) {
return false;
}
return true;
},
},
},
},
],
},
};
import
类型: Boolean|Object 默认值: true
启用/禁用 @import 规则进行处理。 控制 @import 的解析。@import 中的绝对 URL 会被直接移到运行时去处理。
示例解决方案： @import 'style.css' => require('./style.css')
@import url(style.css) => require('./style.css')
@import url('style.css') => require('./style.css')
@import './style.css' => require('./style.css')
@import url(./style.css) => require('./style.css')
@import url('./style.css') => require('./style.css')
@import url('http://dontwritehorriblecode.com/style.css') => @import url('http://dontwritehorriblecode.com/style.css') in runtime
要从 node_modules 目录(包括 resolve.modules)导入样式，而对于 alias，请加上一个前缀 ~： @import url(~module/style.css) => require('module/style.css')
@import url('~module/style.css') => require('module/style.css')
@import url(~aliasDirectory/style.css) => require('otherDirectory/style.css')
Boolean
启用/禁用 @import 解析。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
import: true,
},
},
],
},
};
Object 名称 类型 默认值 描述 {Function} undefined 允许过滤 @import
filter {filter}
类型：Function 默认值：undefined
允许过滤 @import。所有过滤的内容 @import 都不会解析(保留编写时的代码)。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
import: {
filter: (url, media, resourcePath) => {
// resourcePath - css 文件路径
// 不处理 `style.css` 的导入
if (url.includes("style.css")) {
return false;
}
return true;
},
},
},
},
],
},
};
modules
类型：Boolean|String|Object 默认值：undefined
启用/禁用 CSS 模块或者 ICSS 及其配置： undefined - 为所有匹配 /\.module\.\w+$/i.test(filename) 与 /\.icss\.\w+$/i.test(filename) 正则表达式的文件启用 CSS 模块。
true - 对所有文件启用 CSS 模块。
false - 对所有文件禁用 CSS 模块。
string - 对所有文件禁用 CSS 模块并设置 mode 配置项，你可以在 这里 获得更多信息。
object - 如果没有配置 modules.auto 则对所有文件启用 CSS 模块，否则 modules.auto 配置项则会决定其是否为 CSS 模块，你可以在 这里 获得更多信息。
该 modules 选项启用/禁用
设置为 false 值会提升性能，因为避免了 CSS Modules 特性的解析，这对于使用普通 CSS 或者其他技术的开发人员是非常有用的。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: true,
},
},
],
},
};
Features
Scope
使用 local 值要求你指定 :global 类。 使用 global 值要求你指定 :local 类。 使用 pure 值则要求必须至少包含一个局部类或者 id。
你可以点击 此处 了解更多。
样式可以在局部作用域中，避免影响全局作用域的样式。
语法 :local(.className) 可以被用来在局部作用域中声明 className。局部的作用域标识符会以模块形式暴露出去。
使用 :local(无括号)可以为此选择器启用局部模式。 :global(.className) 可以用来声明一个明确的全局选择器。 使用 :global(无括号)可以将此选择器切换至全局模式。
loader 会用唯一的标识符 (identifier) 来替换局部选择器。所选择的唯一标识符以模块形式暴露出去。 :local(.className) {
background: red;
}
:local .className {
color: green;
}
:local(.className .subClass) {
color: green;
}
:local .className .subClass :global(.global-class-name) {
color: blue;
} ._23_aKvs-b8bW2Vg3fwHozO {
background: red;
}
._23_aKvs-b8bW2Vg3fwHozO {
color: green;
}
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 {
color: green;
}
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name {
color: blue;
} ℹ️ 被导出的标识符 exports.locals = {
className: "_23_aKvs-b8bW2Vg3fwHozO",
subClass: "_13LGdX8RMStbBE9w-t0gZ1",
};
本地选择器推荐使用驼峰命名。它们在导入的 JS 模块中更容易使用。
你也可以使用 :local(#someId)，但这并不推荐。应该使用类去代替 id。
Composing
声明本地类名时，可以从另一个本地类名组成一个本地类。 :local(.className) {
background: red;
color: yellow;
}
:local(.subClass) {
composes: className;
background: blue;
}
这不会导致 CSS 本身发生任何变化，但是会导出多个类名。 exports.locals = {
className: "_23_aKvs-b8bW2Vg3fwHozO",
subClass: "_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO",
}; ._23_aKvs-b8bW2Vg3fwHozO {
background: red;
color: yellow;
}
._13LGdX8RMStbBE9w-t0gZ1 {
background: blue;
}
Importing
从另一个模块导入本地类名。 我强烈建议您在导入文件时指定扩展名，因为可以导入具有任何扩展名的文件，而且事先并不能知道要使用哪个文件。 :local(.continueButton) {
composes: button from "library/button.css";
background: red;
} :local(.nameEdit) {
composes: edit highlight from "./edit.css";
background: red;
}
要从多个模块导入，请使用多个 composes: 规则。 :local(.className) {
composes: edit hightlight from "./edit.css";
composes: button from "module/button.css";
composes: classFromThisModule;
background: red;
}
Values
可以使用 @value 来指定在整个文档中都能被重复使用的值，
我们推荐对特定的值使用 v- 的前缀，给选择器使用 s- 的前缀，并且为媒体规则使用 m- 前缀。 @value v-primary: #BF4040;
@value s-black: black-selector;
@value m-large: (min-width: 960px);
.header {
color: v-primary;
padding: 0 10px;
}
.s-black {
color: black;
}
@media m-large {
.header {
padding: 0 20px;
}
}
Boolean
启用 CSS 模块 功能。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: true,
},
},
],
},
};
String
启用 CSS 模块 功能和设置 mode。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
// 使用 `local` 同使用 `modules: true` 的效果是一样的
modules: "global",
},
},
],
},
};
Object
启用 CSS 模块 功能和设置选项。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
mode: "local",
auto: true,
exportGlobals: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]",
localIdentContext: path.resolve(__dirname, "src"),
localIdentHashSalt: "my-custom-hash",
namedExport: true,
exportLocalsConvention: "camelCase",
exportOnlyLocals: false,
},
},
},
],
},
};
auto
类型：Boolean|RegExp|Function 默认值：undefined
当 modules 配置项为对象时允许基于文件名自动启用 CSS 模块或者 ICSS。
有效值： undefined - 为所有文件启用 CSS 模块。
true - 为所有匹配 /\.module\.\w+$/i.test(filename) 和 /\.icss\.\w+$/i.test(filename) 正则表达式的文件启用 CSS 模块。
false - 禁用 CSS 模块。
RegExp - 为所有匹配 /RegExp/i.test(filename) 正则表达式的文件禁用 CSS 模块。
function - 为所有通过基于文件名的过滤函数校验的文件启用 CSS 模块。 Boolean
可能的值： true - 启用 CSS 模块或者可交互 CSS 格式，为所有满足 /\.module(s)?\.\w+$/i.test(filename) 条件的文件设置 modules.mode 选项为 local，或者为所有满足 /\.icss\.\w+$/i.test(filename) 条件的文件设置 modules.mode 选项为 icss
false - 禁用 css 模块或者基于文件名的可交互 CSS 格式
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
auto: true,
},
},
},
],
},
}; RegExp
根据正则表达式检查文件名，为匹配的文件启用 css 模块。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
auto: /\.custom-module\.\w+$/i,
},
},
},
],
},
}; Function
根据过滤器检查文件名，为满足过滤要求的文件启用css模块。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
auto: (resourcePath) => resourcePath.endsWith(".custom-module.css"),
},
},
},
],
},
};
mode
类型：String|Function 默认：'local'
设置 mode 选项。需要 local 模式时可以忽略该值。
控制应用于输入样式的编译级别。
local、global 和 pure 处理 class 和 id 域以及 @value 值。 icss 只会编译底层的 Interoperable CSS 格式，用于声明 CSS 和其他语言之间的 :import 和 :export 依赖关系。
ICSS 提供 CSS Module 支持，并且为其他工具提供了一个底层语法，以实现它们自己的 css-module 变体。 String
可选值 - local、global、pure 和 icss。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
mode: "global",
},
},
},
],
},
}; Function
允许根据文件名设置不同的 mode 选项值。
可能的返回值 - local、global、pure 和 icss。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
// 回调必须返回 `local`，`global`，或者 `pure`
mode: (resourcePath) => {
if (/pure.css$/i.test(resourcePath)) {
return "pure";
}
if (/global.css$/i.test(resourcePath)) {
return "global";
}
return "local";
},
},
},
},
],
},
};
localIdentName
类型：String 默认：'[hash:base64]'
允许配置生成的本地标识符(ident)。
更多关于配置项的信息可以查看：
支持的模板字符串： [name] 源文件名称
[path] 源文件相对于 compiler.context 或者 modules.localIdentContext 配置项的相对路径。
[file] - 文件名和路径。
[ext] - 文件拓展名。
[hash] - 字符串的哈希值。基于 localIdentHashSalt、localIdentHashFunction、localIdentHashDigest、localIdentHashDigestLength、localIdentContext、resourcePath 和 exportName 生成。
[#️⃣:] - 带有哈希设置的哈希。
[local] - 原始类名。
建议： 开发环境使用 '[path][name]__[local]'
生产环境使用 '[hash:base64]'
[local] 占位符包含原始的类。
**注意：**所有保留 (<>:"/\|?*) 和控制文件系统字符 (不包括 [local] 占位符) 都将转换为 -。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
localIdentName: "[path][name]__[local]--[hash:base64:5]",
},
},
},
],
},
};
localIdentContext
类型：String 默认：compiler.context
允许为本地标识符名称重新定义基本的 loader 上下文。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
localIdentContext: path.resolve(__dirname, "src"),
},
},
},
],
},
};
localIdentHashSalt
类型：String 默认：undefined
允许添加自定义哈希值以生成更多唯一类。 更多信息请查看 output.hashSalt。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
localIdentHashSalt: "hash",
},
},
},
],
},
};
localIdentHashFunction
类型：String 默认值：md4
允许设置生成 class 的哈希函数。 更多信息请查看 output.hashFunction。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
localIdentHashFunction: "md4",
},
},
},
],
},
};
localIdentHashDigest
类型：String 默认值：hex
允许设置生成 class 的哈希摘要。 更多信息请查看 output.hashDigest。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
localIdentHashDigest: "base64",
},
},
},
],
},
};
localIdentHashDigestLength {#localidentHashdigestlength}
类型：Number 默认值：20
允许设置生成 class 的哈希摘要长度。 更多信息请查看 output.hashDigestLength。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
localIdentHashDigestLength: 5,
},
},
},
],
},
};
localIdentRegExp
类型：String|RegExp 默认：undefined
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
localIdentRegExp: /page-(.*)\.css/i,
},
},
},
],
},
};
getLocalIdent
类型：Function 默认：undefined
可以指定自定义 getLocalIdent 函数的绝对路径，以基于不同的架构生成类名。 默认情况下，我们使用内置函数来生成 classname。 如果自定义函数返回 null 或者 undefined， 我们将降级使用内置函数来生成 classname。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
getLocalIdent: (context, localIdentName, localName, options) => {
return "whatever_random_class_name";
},
},
},
},
],
},
};
namedExport
类型：Boolean 默认：false
本地环境启用/禁用 export 的 ES 模块。 ⚠ 本地环境的命名将转换为驼峰格式，即 exportLocalsConvention 选项默认设置了 camelCaseOnly。 ⚠ 不允许在 CSS 类名中使用 JavaScript 保留字。
styles.css .foo-baz {
color: red;
}
.bar {
color: blue;
}
index.js import { fooBaz, bar } from "./styles.css";
console.log(fooBaz, bar);
可以使用以下命令启用 export 的 ES 模块：
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
esModule: true,
modules: {
namedExport: true,
},
},
},
],
},
};
可以为 namedExport 设置一个自定义名称，可以使用 exportLocalsConvention 配置项作为一个函数。 可前往 examples 章节查看示例。
exportGlobals
类型：Boolean 默认：false
允许 css-loader 从全局类或 ID 导出名称，因此您可以将其用作本地名称。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
exportGlobals: true,
},
},
},
],
},
};
exportLocalsConvention
类型：String|Function 默认：取决于 modules.namedExport 选项值，如果为 true 则对应的是 camelCaseOnly，反之对应的是 asIs
导出的类名称的样式。 String
默认情况下，导出的 JSON 密钥反映了类名(即 asIs 值)。 ⚠ 如果你设置 namedExport 为 true 那么只有 camelCaseOnly 被允许。 名称 类型 描述 'asIs' {String} 类名将按原样导出。
'camelCase' {String} 类名将被驼峰化，原类名不会从局部环境删除
'camelCaseOnly' {String} 类名将被驼峰化，原类名从局部环境删除
'dashes' {String} 类名中只有破折号会被驼峰化
'dashesOnly' {String} 类名中破折号会被驼峰，原类名从局部环境删除
file.css .class-name {
}
file.js import { className } from "file.css";
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
exportLocalsConvention: "camelCase",
},
},
},
],
},
}; Function
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
exportLocalsConvention: function (name) {
return name.replace(/-/g, "_");
},
},
},
},
],
},
};
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
exportLocalsConvention: function (name) {
return [
name.replace(/-/g, "_"),
// dashesCamelCase
name.replace(/-+(\w)/g, (match, firstLetter) =>
firstLetter.toUpperCase()
),
];
},
},
},
},
],
},
};
exportOnlyLocals
类型：Boolean 默认：false
仅导出局部环境。
使用 css 模块 进行预渲染(例如 SSR)时很有用。 要进行预渲染，预渲染包 应使用 mini-css-extract-plugin 选项而不是 style-loader!css-loader。 它不嵌入 CSS，而仅导出标识符映射。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
exportOnlyLocals: true,
},
},
},
],
},
};
importLoaders
类型：Number 默认：0
允许为 @import 样式规则、CSS 模块或者 ICSS 启用/禁用或设置在 CSS loader 之前应用的 loader 的数量，例如：@import/composes/@value value from './values.css' 等。
importLoaders 选项允许你配置在 css-loader 之前有多少 loader 应用于 @imported 资源与 CSS 模块/ICSS 导入。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 2,
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader
},
},
"postcss-loader",
"sass-loader",
],
},
],
},
};
当模块系统(即 webpack)支持按来源匹配 loader 时，这种情况将来可能会改变。
sourceMap
类型：Boolean 默认值：取决于 compiler.devtool 值
source map 的生成默认依赖 devtool 配置项。除了 eval 与 false 之外的值都会启用 source map。
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
sourceMap: true,
},
},
],
},
};
esModule
类型：Boolean 默认：true
默认情况下，css-loader 生成使用 ES 模块语法的 JS 模块。 在某些情况下，使用 ES 模块是有益的，例如在模块串联或 tree shaking 时。
您可以使用以下方式启用ES模块语法：
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
esModule: false,
},
},
],
},
};
示例
推荐
推荐 production 环境的构建将 CSS 从你的 bundle 中分离出来，这样可以使用 CSS/JS 文件的并行加载。 这可以通过使用 mini-css-extract-plugin 来实现，因为它可以创建单独的 CSS 文件。 对于 development 模式(包括 webpack-dev-server)，你可以使用 style-loader，因为它可以使用多个 标签将 CSS 插入到 DOM 中，并且反应会更快。
i 不要同时使用 style-loader 与 mini-css-extract-plugin。
webpack.config.js const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";
module.exports = {
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
devMode ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
},
],
},
plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
};
使用 /* webpackIgnore: true */ 注释禁用 url 解析
有了 /* webpackIgnore: true */ 注释，可以禁用对规则和单个声明的源处理。 /* webpackIgnore: true */
@import url(./basic.css);
@import /* webpackIgnore: true */ url(./imported.css);
.class {
/* 对 'background' 声明中的所有 url 禁用 url 处理 */
color: red;
/* webpackIgnore: true */
background: url("./url/img.png"), url("./url/img.png");
}
.class {
/* 对 'background' 声明中第一个 url 禁用 url 处理 */
color: red;
background:
/* webpackIgnore: true */ url("./url/img.png"), url("./url/img.png");
}
.class {
/* 对 'background' 声明中第二个 url 禁用 url 处理 */
color: red;
background: url("./url/img.png"),
/* webpackIgnore: true */ url("./url/img.png");
}
/* prettier-ignore */
.class {
/* 对 'background' 声明中第二个 url 禁用 url 处理 */
color: red;
background: url("./url/img.png"),
/* webpackIgnore: true */
url("./url/img.png");
}
/* prettier-ignore */
.class {
/* 对 'background-image' 声明中第三和第六个 url 禁用 url 处理 */
background-image: image-set(
url(./url/img.png) 2x,
url(./url/img.png) 3x,
/* webpackIgnore: true */ url(./url/img.png) 4x,
url(./url/img.png) 5x,
url(./url/img.png) 6x,
/* webpackIgnore: true */
url(./url/img.png) 7x
);
}
Assets
如下配置的 webpack.config.js 可以加载 CSS 文件，嵌入小的 PNG/JPG/GIF/SVG 图片以及字体作为数据 URL，并将较大的文件复制到输出目录。
对于 webpack v5：
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
// 更多信息请点击这里 https://webpack.js.org/guides/asset-modules/
type: "asset",
},
],
},
};
Extract
For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. This can be achieved by using the mini-css-extract-plugin to extract the CSS when running in production mode.
As an alternative, if seeking better development performance and css outputs that mimic production. extract-css-chunks-webpack-plugin offers a hot module reload friendly, extended version of mini-css-extract-plugin. HMR real CSS files in dev, works like mini-css in non-dev
纯 CSS，CSS 模块和 PostCSS
如果项目中没有纯 CSS(没有 CSS 模块)，CSS 模块和 PostCSS，则可以使用以下设置：
webpack.config.js module.exports = {
module: {
rules: [
{
// 对于 pure CSS - /\.css$/i,
// 对于 Sass/SCSS - /\.((c|sa|sc)ss)$/i,
// 对于 Less - /\.((c|le)ss)$/i,
test: /\.((c|sa|sc)ss)$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
// 每一个 CSS 的 `@import` 与 CSS 模块/ICSS 都会运行 `postcss-loader`，不要忘了 `sass-loader` 将不属于 CSS 的 `@import` 编译到一个文件中
// 如果您需要在每个 CSS 的 `@import` 上运行 `sass-loader` 和 `postcss-loader`，请将其设置为 `2`。
importLoaders: 1,
},
},
{
loader: "postcss-loader",
options: { plugins: () => [postcssPresetEnv({ stage: 0 })] },
},
// 也可能是 `less-loader`
{
loader: "sass-loader",
},
],
},
// 对于 webpack v5
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
// More information here https://webpack.js.org/guides/asset-modules/
type: "asset",
},
],
},
};
使用别名解析未解析的 URL
index.css .class {
background: url(/assets/unresolved/img.png);
}
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
resolve: {
alias: {
"/assets/unresolved/img.png": path.resolve(
__dirname,
"assets/real-path-to-img/img.png"
),
},
},
};
Named export with custom export names
webpack.config.js module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
namedExport: true,
exportLocalsConvention: function (name) {
return name.replace(/-/g, "_");
},
},
},
},
],
},
};
只允许 可交互的 CSS 使其与 CSS Module 特性分离
下面是有关配置的示例代码，通过为所有未匹配到 *.module.scss 命名约定文件设置 mode 选项，只允许使用 可交互的 CSS 特性(如 :import 和 :export)，而不使用其他的 CSS Module 特性。此处仅供参考，因为在 v4 之前，css-loader 默认将 ICSS 特性应用于所有文件。 同时，在本示例中，匹配到 *.module.scss 的所有文件都将被视为 CSS Modules。
假设项目中有这样一个需求，要求 canvas 绘制使用的变量与 CSS 同步，换句话说就是 canvas 绘制使用的颜色(在 JavaScript 中设置的颜色名)与 HTML 背景(在 CSS 中通过 class 设置)相同。
webpack.config.js module.exports = {
module: {
rules: [
// ...
// --------
// SCSS ALL EXCEPT MODULES
{
test: /\.scss$/,
exclude: /\.module\.scss$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
mode: "icss",
},
},
},
{
loader: "sass-loader",
},
],
},
// --------
// SCSS MODULES
{
test: /\.module\.scss$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
mode: "local",
},
},
},
{
loader: "sass-loader",
},
],
},
// --------
// ...
],
},
};
variables.scss
文件被视为仅使用 ICSS。 $colorBackground: red;
:export{
colorBackgroundCanvas: $colorBackground;
}
Component.module.scss
文件被视为 CSS Module。 @import "variables.scss";
.componentClass{
background-color: $colorBackground;
}
Component.jsx
在 JavaScript 中直接使用 CSS Module 的特性以及 SCSS 声明的变量。 import svars from "variables.scss";
import styles from "Component.module.scss";
// Render DOM with CSS modules class name
//
//
//
// Somewhere in JavaScript canvas drawing code use the variable directly
// const ctx = mountsCanvas.current.getContext('2d',{alpha: false});
ctx.fillStyle = `${svars.colorBackgroundCanvas}`;
Contributing
如果您还没有阅读，请花一点时间阅读我们的贡献指南。
License
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
相关文章
- 专业音频术语中英文对照
专业音频术语中英文对照 Source: 2009-01-12 我要投稿 论坛 Favorite AAC automatic ampltiude control 自动幅度控制 AB AB制立体声录音法 Abeyancd 暂停，潜态 A-B repeat A-B重复 ABS absolute 绝对的，完全的，绝对时间 ABS am…...
2024/4/28 21:13:39 - Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App
原文:Win10 UWP开发系列：使用VS2015 Update2ionic开发第一个Cordova App安装VS2015 Update2的过程是非常曲折的。还好经过不懈的努力，终于折腾成功了。 如果开发Cordova项目的话，推荐大家用一下ionic这个框架，效果还不错。对于Cor…...
2024/4/28 18:10:16 - 苏州做双眼皮来k爱思特
...
2024/4/28 13:04:15 - angular追加html,angularJS实现动态添加,删除div方法
要实现的功能类似下图，动态添加或者删除div点击 增加可添加一条div 点击删除可删除一条divHTML代码如下：(省略CSS样式代码了大笑)授权给:所有人已认证的用户我自己Open/DownloadView PermissionsEdit Permissions删除增加访问许可保存取消添加和删除的JS…...
2024/4/27 21:42:53 - 苏州整形双眼皮选爱思特
...
2024/4/27 23:49:32 - 苏州双眼皮来 爱思特
...
2024/4/28 16:31:08 - 苏州双眼皮爱思特t强
...
2024/4/28 6:01:03 - 在使用angular和swiper插件中的一些问题
在使用angular获取swiper图片的时候swiper就不会轮播。 解决方法: 1.使用计时器的方法，不是最优 settimeOut(function(){mySwiper new Swiper(".swiper-container",{autoplay:true,//自动播放})}) 2.使用函数 自调 function swiper(){mySwiper n…...
2024/4/27 23:43:53 - 【今日CV 视觉论文速览】22 Nov 2018
今日CS.CV计算机视觉论文速览 Thu, 22 Nov 2018 Totally 47 papers Daily Computer Vision Papers [1] Title: HAQ: Hardware-Aware Automated Quantization Authors:Kuan Wang, Zhijian Liu, Yujun Lin, Ji Lin, Song Han [2] Title: Rethinking ImageNet Pre-training Autho…...
2024/4/28 1:45:55 - Azure: Azure AD(For Development)的使用
一、简介 （一）Azure AD 简介 Azure Active Directory (Azure AD) 是 Microsoft 推出的基于云的全面的标识和访问管理服务，它将核心目录服务、高级标识监管、安全防护和应用程序访问管理相结合，而且还为开发人员提供标识管理平台…...
2024/4/28 19:42:39 - 苏州切双眼皮8佳荐紫 馨6
...
2024/4/28 17:49:48 - 论文笔记之超分：FSTRN-resLR-SRFBN-RBPN
2014到2018的图片超分文章总结传送门 1. Fast Spatio-Temporal Residual Network for Video Super-Resolution（FSTRN 2019 CVPR） 1.1 网络结构 网络分成了四部分： LR video shallow feature extraction net（LFENet）…...
2024/4/28 4:23:51 - Unity 5.1 重大发布，新功能全力支持VR开发！
unity 5.1在今天发布了，我们在5.0发布之后并没有松懈太久便立即投入5.1的更新，想要了解5.1全部的更新请访问官方Release Notes, 以下就由小编来描述一下有哪些重大改变：新功能：Unity 5.1加入了新的网络功能，你可以从官…...
2024/4/28 18:54:37 - 背单词(持续更新）
文章目录复习考研352-353职场俚语1-27分1-23-45-67-8haochifun1-2GRE1-2托福249247-248245-246243-244241-242239-240237-238Inept(a)：不称职的235-236233-234225-226223-224221-222219-220217-218215-216213-214211-212209-210207-208205-206203-204201-202197-198…...
2024/4/28 18:48:40 - Ionic自定义图标
背景 开发过程中ionic自带的图标不能满足需求，需要其他自定义（设计）图标。需要使用一些 iconfont 等网站里面的图标。 开发环境 Ionic：5.4.16 Angular CLI: 8.3.0 Node: 12.9.1 OS: win32 x64开始 1. 下载图标 比如说我需要这…...
2024/4/28 5:50:56 - Encoding Human Domain Knowledge to Warm Start Reinforcement Learning
目录1.研究动机是什么2.主要解决了什么问题3.所提方法是什么3.1总体流程3.2PROLONET决策树网络3.2.1PROLONET初始化3.2.2PROLONET推理3.2.3PROLONET动态增长4.关键结果及结论是什么4.1实验环境及对比算法4.1.1 Cart Pole4.1.2 Lunar Lander4.1.3 FindAndDefeatZerglings4.1.4 S…...
2024/4/28 8:57:01 - 利用archetype创建maven脚手架和新项目
一、基于maven脚手架创建新的项目（如何生成maven脚手架本文后面会有详细说明）： 1、在maven的本地环境(比如C:\Users\dell\.m2)下新建文件archetype-catalog.xml，其中version的值按照实际情况填入： Java代码 <?…...
2024/4/28 22:01:12 - 2016年终总结与来年计划
光阴似箭，日月如梭！眨眼间已到年底，今年感慨颇丰，获益良多。因为我认为努力了就肯定会有收获，哪怕是收获那一滴滴辛勤的汗水。 我在公司任务轻松时，加了些前端群（重点推荐豪情群）&am…...
2024/4/28 4:14:18 - Pure and Mixed States 纯态与混合态
1. Pure States A pure state is any state that can be represented by a single state vector ∣ψ⟩|\psi \rangle∣ψ⟩. What this means in practice is that at any time we can say for certain (with 100% probability) that our system is in state ∣ψ⟩|\psi \ra…...
2024/4/28 9:02:16 - 苏州埋线双眼皮来 爱思特
...
2024/4/21 12:31:38
最新文章
- 在vue项目中使用TS
在vue项目中使用TS 1. 将vue项目注入ts 引入和使用 webpack的打包配置：vue-cli webnpack 编译时 entry 入口 设置 entry: {app: ./src/maikn.ts }2. resolve: extensions 添加 ts 用于处理尝试的数据尾缀列表 问： 如何在webpack新增处理类型文件&am…...
2024/4/29 1:40:52 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言，在此感激不尽。 权重和梯度的更新公式如下： w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 【LeetCode热题100】【二叉树】二叉树的中序遍历
题目链接：94. 二叉树的中序遍历 - 力扣（LeetCode） 中序遍历就是先遍历左子树再遍历根最后遍历右子树 class Solution { public:void traverse(TreeNode *root) {if (!root)return;traverse(root->left);ans.push_back(root->val);tra…...
2024/4/27 18:01:59 - 【超简单】基于PaddleSpeech搭建个人语音听写服务
一、【超简单】之基于PaddleSpeech搭建个人语音听写服务 1.需求分析 亲们，你们要写会议纪要嘛？亲们，你们要写会议纪要嘛？亲们，你们要写会议纪要嘛？当您面对成吨的会议录音，着急写会议纪要而不得不愚公移山、人海战术？听的头晕眼花，听的漏洞百出，听的怀疑人生，那么你…...
2024/4/26 14:59:02 - 【外汇早评】美通胀数据走低，美元调整
原标题：【外汇早评】美通胀数据走低，美元调整昨日美国方面公布了新一期的核心PCE物价指数数据，同比增长1.6%，低于前值和预期值的1.7%，距离美联储的通胀目标2%继续走低，通胀压力较低，且此前美国一季度GDP初值中的消费部分下滑明显，因此市场对美联储后续更可能降息的政策…...
2024/4/28 13:52:11 - 【原油贵金属周评】原油多头拥挤，价格调整
原标题：【原油贵金属周评】原油多头拥挤，价格调整本周国际劳动节，我们喜迎四天假期，但是整个金融市场确实流动性充沛，大事频发，各个商品波动剧烈。美国方面，在本周四凌晨公布5月份的利率决议和新闻发布会，维持联邦基金利率在2.25%-2.50%不变，符合市场预期。同时美联储…...
2024/4/28 3:28:32 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题：【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五，美国方面公布了新一期的非农就业数据，大幅好于前值和预期，新增就业重新回到20万以上。具体数据： 美国4月非农就业人口变动 26.3万人，预期 19万人，前值 19.6万人。 美国4月失业率 3.6%，预期 3.8%，前值 3…...
2024/4/26 23:05:52 - 【原油贵金属早评】库存继续增加，油价收跌
原标题：【原油贵金属早评】库存继续增加，油价收跌周三清晨公布美国当周API原油库存数据，上周原油库存增加281万桶至4.692亿桶，增幅超过预期的74.4万桶。且有消息人士称，沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油，印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/28 13:51:37 - 【外汇早评】日本央行会议纪要不改日元强势
原标题：【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升，避险资金回流日元有关，也与前一段时间的美日贸易谈判给日本缓冲期，日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策，但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响
原标题：【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响近日伊朗局势升温，导致市场担忧影响原油供给，油价试图反弹。此时OPEC表态稳定市场。据消息人士透露，沙特6月石油出口料将低于700万桶/日，沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”，沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题：【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议，昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告，伊朗外长昨日回应称，欧洲国家履行它们的义务，伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升，市场情绪动荡
原标题：【原油贵金属早评】波动率飙升，市场情绪动荡因中美贸易谈判不安情绪影响，金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际，美国按照既定计划向中国2000亿商品征收25%的关税，市场情绪有所平复，已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/28 15:57:13 - 【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试
原标题：【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试美国和伊朗的局势继续升温，市场风险情绪上升，避险黄金有向上突破阻力的迹象。原油方面稍显平稳，近期美国和OPEC加大供给及市场需求回落的影响，伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级，美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化，黄金上破
原标题：【原油贵金属早评】市场情绪继续恶化，黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动，人民币汇率出现大幅的贬值动能，金融市场受到非常明显的冲击。尤其是波动率起来之后，对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势，这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持，风险情绪继续升温
原标题：【外汇早评】美伊僵持，风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件，导致波斯湾局势进一步恶化，市场担忧美伊可能会出现摩擦生火，避险品种获得支撑，黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日，四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷，油价弱势
原标题：【原油贵金属早评】贸易冲突导致需求低迷，油价弱势近日虽然伊朗局势升温，中东地区几起油船被袭击事件影响，但油价并未走高，而是出于调整结构中。由于市场预期局势失控的可能性较低，而中美贸易问题导致的全球经济衰退风险更大，需求会持续低迷，因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖（上）——为时光守候两千年
原标题：氧生福地 玩美北湖（上）——为时光守候两千年一次说走就走的旅行，只有一张高铁票的距离～ 所以，湖南郴州，我来了～ 从广州南站出发，一个半小时就到达郴州西站了。在动车上，同时改票的南风兄和我居然被分到了一个车厢，所以一路非常愉快地聊了过来。 挺好，最起…...
2024/4/28 1:22:35 - 氧生福地 玩美北湖（中）——永春梯田里的美与鲜
原标题：氧生福地 玩美北湖（中）——永春梯田里的美与鲜一觉醒来，因为大家太爱“美”照，在柳毅山庄去寻找龙女而错过了早餐时间。近十点，向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”，到郴州必吃的美食之一。 哇塞！那个味美香甜…...
2024/4/25 18:39:14 - 氧生福地 玩美北湖（下）——奔跑吧骚年！
原标题：氧生福地 玩美北湖（下）——奔跑吧骚年！让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/26 23:04:58 - 扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！
原标题：扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！扒开伪装医用面膜，翻六倍价格宰客！当行业里的某一品项火爆了，就会有很多商家蹭热度，装逼忽悠，最近火爆朋友圈的医用面膜，被沾上了污点，到底怎么回事呢？ “比普通面膜安全、效果好！痘痘、痘印、敏感肌都能用…...
2024/4/27 23:24:42 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题：「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势： 1、铁皮石斛：自唐宋以来，一直被列为皇室贡品，铁皮石斛生于海拔1600米的悬崖峭壁之上，繁殖力差，产量极低，所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题：丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司，专注美业21年，其旗下品牌： 「圣茵美」私密荷尔蒙抗衰，产后修复 「圣仪轩」私密荷尔蒙抗衰，产后修复 「花茵莳」私密荷尔蒙抗衰，产后修复 「丽彦妆」专注医学护…...
2024/4/26 19:46:12 - 广州械字号面膜生产厂家OEM/ODM4项须知！
原标题：广州械字号面膜生产厂家OEM/ODM4项须知！广州械字号面膜生产厂家OEM/ODM流程及注意事项解读： 械字号医用面膜，其实在我国并没有严格的定义，通常我们说的医美面膜指的应该是一种「医用敷料」，也就是说，医用面膜其实算作「医疗器械」的一种，又称「医用冷敷贴」。 …...
2024/4/27 11:43:08 - 械字号医用眼膜缓解用眼过度到底有无作用？
原标题：械字号医用眼膜缓解用眼过度到底有无作用？医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料，含70%以上的水分。体表皮肤温度传导到本产品的凝胶层，热量被凝胶内水分子吸收，通过水分的蒸发带走大量的热量，可迅速地降低体表皮肤局部温度，减轻局部皮肤的灼…...
2024/4/27 8:32:30 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示，配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下：1、长按电脑电源键直至关机，然后再按一次电源健重启电脑，按F8健进入安全模式2、安全模式下进入Windows系统桌面后，按住“winR”打开运行窗口，输入“services.msc”打开服务设置3、在服务界面，选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE，请勿更改元素数目。
%读入6幅图像（每一幅图像的大小是564*564） f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面，在等待界面中我们需要等待操作结束才能关机，虽然这比较麻烦，但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows，请勿关闭计算机”的提示，要过很久才能进入系统，有的用户甚至几个小时也无法进入，下面就教大家这个问题的解决方法。第一种方法：我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题，电脑时发现开机屏幕显现“正在配置Windows Update，请勿关机”(如下图所示)，而且还需求等大约5分钟才干进入系统。这是怎样回事呢？一切都是正常操作的，为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示，没过几秒后电脑自动重启，每次开机都这样无法进入系统，此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一：开机按下F8，在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况，就是电脑提示正在准备windows请勿关闭计算机，碰到这样的问题该怎么解决呢，现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法：1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后，每次关机的时候桌面上都会显示一个“配置Windows Update的界面，提示请勿关闭计算机”，每次停留好几分钟才能正常关机，导致什么情况引起的呢？出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着，别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚，只能是考虑备份数据后重装系统了。解决来方案一：管理员运行cmd：net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办？
原标题：电脑提示“配置Windows Update请勿关闭计算机”怎么办？win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢？一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间：2020-04-20 22:24:19 浏览次数：729次 区域： 南阳 > 卧龙 列举网提醒您：为保障您的权益，请不要提前支付任何费用！ 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于：钉钉，外勤365，红圈通，企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”，长时间没反应，无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了，具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面，长时间没反应，无法进入系统。这个问题原来帮其他同学也解决过，网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办？...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法，并在最后教给你1种保护系统安全的好方法，一起来看看！电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中，添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败，正在还原更改，请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候，开启电脑发现电脑显示：配置windows更新失败，正在还原更改，请勿关闭计算机。。.这要怎么办呢？下面小编就带着大家一起看看吧！如果能够正常进入系统，建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题，就是我们的win7系统在关机的时候，总是喜欢显示“准备配置windows，请勿关机”这样的一个页面，没有什么大碍，但是如果一直等着的话就要两个小时甚至更久都关不了机，非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时，一般是您正对windows进行升级，但是这个要是长时间没有反应，我们不能再傻等下去了。可能是电脑出了别的问题了，来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败，还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况，当我们打开电脑之后，发现一直停留在一个界面：“配置Windows Update失败，还原更改请勿关闭计算机”，等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57