Neolithic Psychedelic Mushrooms

    laravel-mix-vue-css-modules

    3.0.0 • Public • Published

    Laravel Mix Vue Css Modules
    npm npm

    Add support for css module laravel mix. CSS, SCSS, LESS & STYLUS

    Installation

    npm i laravel-mix-vue-css-modules
    

    Usage

    First, VueCssModules must be enabled. Your webpack.mix.js could look like this:

    const mix = require("laravel-mix");
    require("laravel-mix-vue-css-modules");
     
    mix.vueCssModules();

    Then, add the module attribute to your <style>

    <style module>
    .red {
      color: red;
    }
    .bold {
      font-weight: bold;
    }
    </style>

    You can then use it in your templates with a dynamic class binding:

    <template>
        <p :class="$style.red">This should be red</p>
    </template>

    And that's it. you ready to go.

    Opt-in Usage

    If you only want to use CSS Modules in some of your Vue components, you can set oneOf to true

    mix.vueCssModules({ oneOf: true });

    Custom Injectname

    <style module="$cssA">
      /* identifiers injected as $cssA */
    </style>
     
    <style module="$cssB">
      /* identifiers injected as $cssB */
    </style>

    Pre-Processors

    By default all pre-processors are disabled.

    For Scss

    mix.vueCssModules({ preProcessor: { scss: true } });

    For Less

    npm i less less-loader --save-dev

    then set less to true

    mix.vueCssModules({ preProcessor: { less: true } });

    For Stylus

    npm i stylus stylus-loader --save-dev

    then set stylus to true

    mix.vueCssModules({ preProcessor: { stylus: true } });

    Custom localIdentName

    Default:

    • [path][name]__[local] for development
    • [hash:base64] for production
    mix.vueCssModules({
        cssLoaderOptions: { localIdentName: "[path][name]__[local]" }
    });

    or you can use react or discord localIdentName

    mix.vueCssModules({ localIdentNameType: "react" });

    Enable sourceMap

    Default: false

    mix.vueCssModules({ cssLoaderOptions: { sourceMap: true } });

    Set importLoaders

    Default: 1

    mix.vueCssModules({ cssLoaderOptions: { importLoaders: 2 } });

    Exclude

    mix.vueCssModules({ exclude: [path.resolve(__dirname, "node-modules")] });

    Exclude css

    you may want some of your css exluded from generated class by css module.

    const getLocalIdent = require("css-loader/lib/getLocalIdent");
     
    mix.vueCssModules({
        cssLoaderOptions: {
            getLocalIdent: (context, localIdentName, localName, options) => {
                return context.resourcePath.includes("x.scss")
                    ? localName
                    : getLocalIdent(context, localIdentName, localName, options);
            }
        }
    });

    Example

    <script>
    export default {};
    </script>
     
    <template>
        <div>
            <span class="blue">css scoped</span>
     
            <span :class="$css.blue">css module</span>
     
            <span class="red">scss scoped</span>
     
            <span :class="$scss.red">scss module</span>
     
            <span class="green">less scoped</span>
     
            <span :class="$less.green">less module</span>
     
            <span class="indigo">stylus scoped</span>
     
            <span :class="$stylus.indigo">stylus module</span>
        </div>
    </template>
     
    <style scoped>
    .blue {
        color: blue;
    }
    </style>
     
    <style module="$css">
    .blue {
        color: blue;
    }
    </style>
     
    <style lang="scss" scoped>
    @mixin my-color($color) {
        color: $color;
    }
     
    .red {
        @include my-color(red);
    }
    </style>
     
    <style lang="scss" module="$scss">
    @mixin my-color($color) {
        color: $color;
    }
     
    .red {
        @include my-color(red);
    }
    </style>
     
    <style lang="less" scoped>
    @color: green;
     
    .green {
        color: @color;
    }
    </style>
     
    <style lang="less" module="$less">
    @color: green;
     
    .green {
        color: @color;
    }
    </style>
     
    <style lang="stylus" scoped>
    my-color()
        color: arguments
     
    .indigo
        my-color: indigo
    </style>
     
    <style lang="stylus" module="$stylus">
    my-color()
        color: arguments
     
    .indigo
        my-color: indigo
    </style>

    Install

    npm i laravel-mix-vue-css-modules

    DownloadsWeekly Downloads

    31

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • asuramus