style-loader

style-loader

通过注入<style>标签将CSS添加到DOM

安装

npm install style-loader --save-dev

Usage

建议将 style-loadercss-loader 结合使用

component.js

import style from './file.css'

webpack.config.js

{ module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } ] } }

在使用局部作用域 CSS 时,模块导出生成的(局部)标识符(identifier)。

component.js

import style from './file.css' style.className === "z849f98ca812"

Url

也可以添加一个URL <link href="path/to/file.css" rel="stylesheet">,而不是用带有 <style></style> 标签的内联 CSS {String}。

import url from 'file.css'

webpack.config.js

{ module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader/url" }, { loader: "file-loader" } ] } ] } }

<link rel="stylesheet" href="path/to/file.css">

信息来源:使用 url 引用的 Source map 和资源:当 style-loader 与 { options: { sourceMap: true } } 选项一起使用时,CSS 模块将生成为 Blob,因此相对路径无法正常工作(他们将相对于 chrome:blobchrome:devtools)。为了使资源保持正确的路径,必须设置 webpack 配置中的 output.publicPath 属性,以便生成绝对路径。或者,你可以启用上面提到的 convertToAbsoluteUrls 选项。

Useable

按照惯例,引用计数器 API(Reference Counter API) 应关联到 .useable.css,而 .css 的载入,应该使用基本的 style-loader 用法(类似于其他文件类型,例如 .useable.less.less)。

webpack.config.js

{ module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, ], }, { test: /\.useable\.css$/, use: [ { loader: "style-loader/useable" }, { loader: "css-loader" }, ], }, ], }, }

Reference Counter API

component.js

import style from './file.css' style.use( // = style.ref( style.unuse( // = style.unref(

样式不会添加在 import/require() 上,而是在调用 use/ref 时添加。如果 unuse/unrefuse/ref 一样频繁地被调用,那么样式将从页面中删除。

:警告:当unuse/ unrefuse/ 更经常地调用时,行为不确定ref。不要这样做。

选项

名称类型默认描述
HMR{}布尔true启用/禁用热模块更换(HMR),如果禁用,则不会添加HMR代码(适用于非本地开发/生产)
基础{数}true设置模块ID库(DLLPlugin)
ATTRS{目的}{}将自定义attrs添加到<style> </ style>
转变{功能}false通过传递转换/条件函数来转换/有条件地加载CSS
insertAt{字符串|对象}bottom在给定的位置插入<style> </ style>
INSERTINTO{串}<HEAD>将<style> </ style>插入到给定的位置
sourceMap{}布尔false启用/禁用Sourcemap
convertToAbsoluteUrls{}布尔false源地图启用时,将相对URL转换为绝对地址

hmr

启用/禁用热模块更换(HMR),如果禁用,则不会添加HMR代码。这可以用于非本地开发和生产。

webpack.config.js

{ loader: 'style-loader', options: { hmr: false } }

base

当使用一个或多个 DllPlugin 时,此设置主要用作 css 冲突 的修补方案。base 可以防止 app 的 css(或 DllPlugin2 的 css)覆盖 DllPlugin1 的 css,方法是指定一个 css 模块的 id 大于 DllPlugin1 的范围,例如:

webpack.dll1.config.js

{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }

webpack.dll2.config.js

{ test: /\.css$/, use: [ { loader: 'style-loader', options: { base: 1000 } }, 'css-loader' ] }

webpack.app.config.js

{ test: /\.css$/, use: [ { loader: 'style-loader', options: { base: 2000 } }, 'css-loader' ] }

attrs

如果已定义,style-loader 将把属性值附加在 <style> / <link> 元素上。

component.js

import style from './file.css'

webpack.config.js

{ test: /\.css$/, use: [ { loader: 'style-loader', options: { attrs: { id: 'id' } } } { loader: 'css-loader' } ] }

<style id="id"></style>

Url

component.js

import link from './file.css'

webpack.config.js

{ test: /\.css$/, use: [ { loader: 'style-loader/url', options: { attrs: { id: 'id' } } } { loader: 'file-loader' } ] }

transform

transform 是一个函数,可以在通过 style-loader 加载到页面之前修改 css。 该函数将在即将加载的 css 上调用,函数的返回值将被加载到页面,而不是原始的 css 中。 如果 transform 函数的返回值是 falsy 值,那么 css 根本就不会加载到页面中。

webpack.config.js

{ loader: 'style-loader', options: { transform: 'path/to/transform.js' } }

transform.js

module.exports = function (css) { // Here we can change the original css const transformed = css.replace('.classNameA', '.classNameB') return transformed }

Conditional

webpack.config.js

{ loader: 'style-loader', options: { transform: 'path/to/conditional.js' } }

conditional.js

module.exports = function (css) { // If the condition is matched load [and transform] the CSS if (css.includes('something I want to check')) { return css; } // If a falsy value is returned, the CSS won't be loaded return false }

insertAt

默认情况下,style-loader 将 <style> 元素附加到样式目标(style target)的末尾,即页面的 <head> 标签,也可以是由 insertInto 指定其他标签。这将导致 loader 创建的 CSS 优先于目标中已经存在的 CSS。要在目标的起始处插入 style 元素,请将此查询参数(query parameter)设置为 'top',例如

webpack.config.js

{ loader: 'style-loader', options: { insertAt: 'top' } }

<style>通过传递一个对象,可以在特定元素之前插入一个新元素,例如

webpack.config.js

{ loader: 'style-loader', options: { insertAt: { before: '#id' } } }

insertInto

默认情况下,样式加载器将 <style> 元素插入到页面的 <head> 标签中。如果要将标签插入到其他位置,可以在这里为该元素指定 CSS 选择器。如果你想要插入到 IFrame 中,请确保你具有足够的访问权限,样式将被注入到内容文档的 head 中。 你还可以将样式插入到 ShadowRoot 中,如下

webpack.config.js

{ loader: 'style-loader', options: { insertInto: '#host::shadow>#root' } }

singleton

如果已定义,则 style-loader 将重用单个 <style> 元素,而不是为每个所需的模块添加/删除单个元素。

ℹ️默认情况下启用此选项,IE9 对页面上允许的 style 标签数量有严格的限制。你可以使用 singleton 选项来启用或禁用它。

webpack.config.js

{ loader: 'style-loader', options: { singleton: true } }

sourceMap

启用/禁用 source map 加载

webpack.config.js

{ loader: 'style-loader', options: { sourceMap: true } }

convertToAbsoluteUrls

如果 convertToAbsoluteUrls 和 sourceMaps 都启用,那么相对 url 将在 css 注入页面之前,被转换为绝对 url。这解决了在启用 source map 时,相对资源无法加载的问题。你可以使用 convertToAbsoluteUrls 选项启用它。

webpack.config.js

{ loader: 'style-loader', options: { sourceMap: true, convertToAbsoluteUrls: true } }