CSS Modules is a popular system for modularizing and composing CSS. vue-loader provides first-class integration with CSS Modules as an alternative for simulated scoped CSS.
First, CSS Modules must be enabled by passing modules: true to css-loader:
Then, add the module attribute to your <style>:
The module attribute instructs Vue Loader to inject the CSS modules locals object into the component as a computed property with the name $style. You can then use it in your templates with a dynamic class binding:
Since it's a computed property, it also works with the object/array syntax of :class:
And you can also access it from JavaScript:
Refer to the CSS Modules spec for mode details such as global exceptions and composition .
# Opt-in UsageIf you only want to use CSS Modules in some of your Vue components, you can use a oneOf rule and check for the module string in resourceQuery:
CSS Modules can be used along with other pre-processors:
# Custom Inject NameYou can have more than one <style> tags in a single *.vue component. To avoid injected styles to overwrite each other, you can customize the name of the injected computed property by giving the module attribute a value:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4