KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

vue-media-loader

★ 47 Open GitHub ↗

Enable `media` attribute on Vue SFC styles

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 `<style>` block in your `.vue` files.

```vue
<template>
  <p class="message">This text color will be changed if you change the window width.</p>
</template>

The above code is equivalent with the following:

```vue
<template>
  <p class="message">This text color will be changed if you change the window width.</p>
</template>

@media (max-width: 767px) {
  .message {
    color: #33a;
  }
}

@media (max-width: 320px) {
  .message {
    color: #a33;
  }
}
</style>
```

## License

MIT

vue-media-loader

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README