Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Webpack plugin for wrapping CSS into cascade layers.

License

NotificationsYou must be signed in to change notification settings

kburich/css-layering-webpack-plugin

Repository files navigation

Wraps CSS in named cascade layers. What CSS is wrapped in which layer is defined using glob patterns supported by minimatch package. Note that it is also possible to exclude paths using glob patterns (see advanced use case). Layer order is derived from order in which layers are defined.

Getting Started

To begin, you'll need to installcss-layering-webpack-plugin:

npm install css-layering-webpack-plugin --save-dev

or

yarn add -D css-layering-webpack-plugin

or

pnpm add -D css-layering-webpack-plugin

Then add the plugin to yourwebpack config. For example:

webpack.config.js

const{ CSSLayeringPlugin}=require("css-layering-webpack-plugin");module.exports={plugins:[newCSSLayeringPlugin({layers:[{path:"**/src/features/exports/**/*.module.scss",name:"exports"},{path:"**/src/components/**/*.module.scss",name:"components"},{path:"**/libraries/ui/dist/components/**/*.module.scss",name:"ui-shared",},],}),],};

Options

injectOrderAs

typeInjectOrderAs="style"|"link"|"none";

Determines how the @layer order statement will be injected. Either as a style or link tag. Default value isstyle.

publicPath

typePublicPath=string;

If the layer order is injected using link tag then the href property will be set to value of this option.

nonce

typeNonce=string;

If the layer order is injected via style tag then the nonce property will be set to this option.

Advanced usage example

constCssLayeringPlugin=require("css-layering-webpack-plugin");module.exports={plugins:[newCssLayeringPlugin({layers:[{path:"**/src/features/exports/**/*.module.scss",name:"exports"},{path:"**/src/components/**/*.module.scss",name:"components"},{path:"**/libraries/ui/dist/components/**/*.module.scss",exclude:"**/notification.module.scss",name:"ui-shared",},],injectOrderAs:"link",publicPath:"/static/css/layers.css",}),],};

Note

You can inject preexisting named layers into layer order by specifying a layer withoutpath

License

MIT

About

Webpack plugin for wrapping CSS into cascade layers.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp