vue-cli-plugin-inject-style

automatically inject style files based on the style path

Install

with pnpm

pnpm add vue-cli-plugin-inject-style -D

with yarn

yarn add vue-cli-plugin-inject-style -D

with npm

npm install vue-cli-plugin-inject-style -D

with vue

vue add vue-cli-plugin-inject-style

Option

export interface InjectStyle {
    /**
     * @description style root
     * @default src/style
     */
    path: string;

    /**
     * @description style suffix
     * @default ["scss","less"]
     */
    suffixs: suffix[];
}

Config

// vue.config.js
const path = require('node:path');
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
    transpileDependencies: true,
    css: {
        sourceMap: false,
        loaderOptions: {
            // manual add
            scss: {
                additionalData: '@import "~@/styles/index.scss";'
            }
        }
    },
    pluginOptions: {
        'vue-cli-plugin-inject-style': {
            path: path.join(__dirname, 'src', 'style'),
            suffixs: ['scss', 'less']
        }
    }
});