https://github.com/ktsn/vue-media-loader
Enable `media` attribute on Vue SFC styles
https://github.com/ktsn/vue-media-loader
media-query single-file-component style vue webpack-loader
Last synced: about 1 year ago
JSON representation
Enable `media` attribute on Vue SFC styles
- Host: GitHub
- URL: https://github.com/ktsn/vue-media-loader
- Owner: ktsn
- License: mit
- Created: 2018-06-01T08:47:51.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:26:42.000Z (over 3 years ago)
- Last Synced: 2025-03-26T08:12:15.344Z (about 1 year ago)
- Topics: media-query, single-file-component, style, vue, webpack-loader
- Language: TypeScript
- Size: 1.42 MB
- Stars: 47
- Watchers: 2
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-media-loader
Enable `media` attribute on Vue SFC styles.
## Requirements
- vue-loader >= 15
## Installation
```sh
$ npm i -D vue-media-loader
```
## Usage
Add `vue-loader` and `vue-media-loader` in your webpack config. Note that you need to insert `vue-media-loader` between any CSS preprocessors and `css-loader`.
```js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ... Other configs goes here ...
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'vue-media-loader',
'sass-loader'
]
}
]
},
plugins: [new VueLoaderPlugin()]
}
```
Then you can write `media` attribute on `` block in your `.vue` files.
```vue
<template>
<p class="message">This text color will be changed if you change the window width.</p>
</template>
<style>
.message {
color: #333;
}
.message {
color: #33a;
}
.message {
color: #a33;
}
```
The above code is equivalent with the following:
```vue
.message {
color: #333;
}
@media (max-width: 767px) {
.message {
color: #33a;
}
}
@media (max-width: 320px) {
.message {
color: #a33;
}
}
```
## License
MIT