@best-shot/preset-style

A best-shot preset for stylesheet.

Usage no npm install needed!

<script type="module">
  import bestShotPresetStyle from 'https://cdn.skypack.dev/@best-shot/preset-style';
</script>

README

@best-shot/preset-style logo

A best-shot preset for stylesheet.

npm github node

This preset offer the following features:

Installation

npm install @best-shot/preset-style --save-dev

Usage

// example: .best-shot/config.mjs
export default {
  presets: ['style']
};

CSS Modules support

Use [name].module.[extname] as filename.

import { bar } from './bar.module.scss';
import { foo } from './foo.module.css';

Use CSS Modules in Vue.js. Learn more

<!-- example.vue -->
<style lang="css" module></style>
<style lang="scss" module></style>
<style lang="less" module></style>

Tips

Load custom postcss config

Disable internal options:

// example: .best-shot/config.mjs
export default {
  webpackChain(config) {
    config.module
      .rule('style')
      .rule('postcss')
      .use('postcss-loader')
      .tap((options) => ({
        ...options,
        postcssOptions: {}
      }));
  }
};

Write your config in any way. See https://github.com/postcss/postcss-load-config

// example: postcss.config.cjs
module.exports = {
  plugins: {
    'postcss-preset-env': {}
  }
};

Related