@best-shot/preset-style

A best-shot preset for stylesheet.

This preset offer the following features:

• CSS Modules support
• Interoperable CSS support
• Less / Sass syntax support
• PostCSS support
• Use postcss-preset-evergreen by default(including Autoprefixer)
• Use cssnano in production mode

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

• @best-shot/preset-asset
• @best-shot/preset-web
• @best-shot/core