This simple loader wraps the loading of CSS in script equivalent to `require('load-themed-styles').loadStyles( /* css text */ )`. It is designed to be a replacement for style-loader.
npm install @microsoft/webpack5-load-themed-styles-loadernpm install @microsoft/webpack5-load-themed-styles-loader --save-dev
This simple Webpack loader that wraps the loading of CSS in script equivalent
to require("@microsoft/load-themed-styles").loadStyles( / css text / ).
It is designed to be a replacement for style-loader.
This loader is designed to be used in conjunction with css-loader.
`` javascript`
var css = require("@microsoft/webpack5-load-themed-styles-loader!css!./file.css");
// => returns css code from file.css, uses load-themed-styles to load the CSS on the page.
` javascript
use: [
{
loader: "@microsoft/webpack5-load-themed-styles-loader", // creates style nodes from JS strings
options: {
async: false
}
},
{
loader: "css-loader", // translates CSS into CommonJS
options: {
modules: true,
importLoaders: 2,
localIdentName: '[name]_[local]_[hash:base64:5]',
minimize: false
}
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
{
loader: "sass-loader",
}
]
`
By default, @microsoft/load-themed-styles loads styles synchronously. This can have adverse performance effectsasync
if many styles are loaded in quick succession. If the option is set to true, the loadStyles functiontrue
is called with the second parameter set to , directing the function to debounce style loading causing fewer
changes to the DOM.
- CHANGELOG.md - Find
out what's new in the latest version
@microsoft/webpack5-load-themed-styles-loader` is part of the Rush Stack family of projects.