История

Rushbot 7f1ca5f5e9 Bump versions [skip ci]		2024-10-24 00:15:51 +00:00
..
config	Use an internal node build rig for internal, non-cyclic projects.	2023-09-19 12:10:45 -07:00
src	Bump webpack 5 (#4951 )	2024-10-01 17:51:17 -04:00
.eslintrc.js	Update local rigs to extend the local eslint config.	2023-09-26 01:23:09 -07:00
.npmignore	Include CHANGELOG.md in published releases again (#4851 )	2024-07-26 10:33:37 -07:00
CHANGELOG.json	Update changelogs [skip ci]	2024-10-24 00:15:48 +00:00
CHANGELOG.md	Update changelogs [skip ci]	2024-10-24 00:15:48 +00:00
LICENSE	address pr comments	2023-01-11 02:18:21 +00:00
README.md	update readme	2023-01-11 02:18:21 +00:00
package.json	Bump versions [skip ci]	2024-10-24 00:15:51 +00:00
tsconfig.json	Use an internal node build rig for internal, non-cyclic projects.	2023-09-19 12:10:45 -07:00

README.md

@microsoft/webpack5-load-themed-styles-loader

Installation

npm install @microsoft/webpack5-load-themed-styles-loader --save-dev

Overview

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.

Usage

Documentation: Using loaders

This loader is designed to be used in conjunction with css-loader.

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.

Example config

        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",
          }
        ]

Options

`async` (boolean, defaults to `false`)

By default, @microsoft/load-themed-styles loads styles synchronously. This can have adverse performance effects if many styles are loaded in quick succession. If the async option is set to true, the loadStyles function is called with the second parameter set to true, directing the function to debounce style loading causing fewer changes to the DOM.