Security News
NVD Backlog Tops 20,000 CVEs Awaiting Analysis as NIST Prepares System Updates
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
By Sarah Gooding - Nov 19, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-style-loader
Advanced tools
What is vue-style-loader?
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
style-loader
style-loader is a webpack loader that injects CSS into the DOM using multiple <style> tags. It is similar to vue-style-loader but is not scoped to Vue.js components and does not have built-in SSR support.
mini-css-extract-plugin
This webpack plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It is different from vue-style-loader as it generates external CSS files instead of injecting styles into the DOM.
isomorphic-style-loader
isomorphic-style-loader is designed for isomorphic (universal) web apps. It extends style-loader to work with server-side rendering, similar to vue-style-loader's SSR support, but it is not specific to Vue.js.
vue-style-loader
This is a fork of style-loader, fixing the issue that root-relative URLs are interpreted against chrome:// urls.
Usage
Simple API
require("style!raw!./file.css");
// => add rules in file.css to document
It's recommended to combine it with the css-loader: require("style!css!./file.css").
It also possible to add a URL instead of a css string:
require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document
Placeholders
(experimental)
When using placeholders (see css-loader) the module exports the placeholders object:
var styles = require("style!css!./file.css");
style.placeholder1 === "z849f98ca812bc0d099a43e0f90184"
Reference-counted API
var style = require("style/useable!css!./file.css");
style.use(); // = style.ref();
style.unuse(); // = style.unref();
Styles are not added on require, but instead on call to use/ref. Styles are removed from page if unuse/unref is called exactly as often as use/ref.
Note: Behavior is undefined when unuse/unref is called more often than use/ref. Don't do that.
Options
insertAt
By default, the style-loader appends <style> elements to the end of the <head> tag of the page. This will cause CSS created by the loader to take priority over CSS already present in the document head. To insert style elements at the beginning of the head, set this query parameter to 'top', e.g. require('../style.css?insertAt=top').
singleton
If defined, the style-loader will re-use a single <style> element, instead of adding/removing individual elements for each required module. Note: this option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton query parameter (?singleton or ?-singleton).
Recommended configuration
By convention the reference-counted API should be bound to .useable.css and the simple API to .css (similar to other file types, i. e. .useable.less and .less).
So the recommended configuration for webpack is:
{
module: {
loaders: [
{ test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
{ test: /\.useable\.css$/, loader: "style/useable!css" }
]
}
}
Note about source maps support and assets referenced with url: when style loader is used with ?sourceMap option, the CSS modules will be generated as Blobs, so relative paths don't work (they would be relative to chrome:blob or chrome:devtools). In order for assets to maintain correct paths setting output.publicPath property of webpack configuration must be set, so that absolute paths are generated.
Install
npm install style-loader
License
FAQs
Vue.js style loader module for webpack
We found that vue-style-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 05 Jan 2016
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.
Related posts
Security News
Research
Malicious npm Package Exploits WhatsApp Authentication with Remote Kill Switch for File Destruction
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
By Kush Pandya - Nov 15, 2024
Security News
PyPI Introduces Digital Attestations to Strengthen Python Package Security
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
By Sarah Gooding - Nov 15, 2024