The vue-style-loader is an npm package that is designed to work with Vue.js single-file components. It allows for the injection of component-scoped CSS into the document's head section dynamically. This loader can handle hot module replacement (HMR) during development, which means styles can be updated without refreshing the entire page. It also supports server-side rendering (SSR) for Vue applications.

What are vue-style-loader's main functionalities?

CSS Injection

Injects CSS into the document's head section. The code sample shows how to chain vue-style-loader with css-loader to process and add a CSS file to a Vue component.

require('vue-style-loader!css-loader!./styles.css');

Hot Module Replacement (HMR)

Supports HMR, allowing styles to be updated in real-time during development without a full page reload. The code sample demonstrates how to set up HMR for a CSS file within a Vue component.

if (module.hot) {
  module.hot.accept('./styles.css', function() {
    require('vue-style-loader!css-loader!./styles.css');
  });
}

Server-Side Rendering (SSR) Support

vue-style-loader can be used in server-side rendering setups to inject styles when rendering Vue components on the server. The code sample shows a basic server setup that renders a Vue application to a string.

const createApp = require('/path/to/built-server-bundle.js');
server.get('*', (req, res) => {
  const context = { url: req.url };
  createApp(context).then(app => {
    renderer.renderToString(app, (err, html) => {
      if (err) {
        if (err.code === 404) {
          res.status(404).end('Page not found');
        } else {
          res.status(500).end('Internal Server Error');
        }
      } else {
        res.end(html);
      }
    });
  });
});

Other packages similar to vue-style-loader

vue-style-loader

This is a fork based on style-loader. Similar to style-loader, you can chain it after css-loader to dynamically inject CSS into the document as style tags. However, since this is included as a dependency and used by default in vue-loader, in most cases you don't need to configure this loader yourself.

Differences from `style-loader`

Server-Side Rendering Support

When bundling with target: 'node', the styles in all rendered components are collected and exposed on the Vue render context object as context.styles, which you can simply inline into your markup's <head>. If you are building a Vue SSR app, you probably should use this loader for CSS imported from JavaScript files too.

Misc

Does not support url mode and reference counting mode. Also removed singleton and insertAt query options. It always automatically pick the style insertion mechanism that makes most sense. If you need these capabilities you should probably use the original style-loader instead.
Fixed the issue that root-relative URLs are interpreted against chrome:// urls and make source map URLs work for injected <style> tags in Chrome.

License

MIT

FAQs

What is vue-style-loader?

Is vue-style-loader popular?

Is vue-style-loader well maintained?

Package last updated on 28 Mar 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install