Skip to content

Instantly share code, notes, and snippets.

@dsazup

dsazup/CssModules.js

Created June 4, 2019 16:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dsazup/56c8f97f9728652b2d822a411c7aa40c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dsazup/56c8f97f9728652b2d822a411c7aa40c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dsazup created this gist Jun 4, 2019.
    88 changes: 88 additions & 0 deletions CssModules.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    module.exports = class CssModules {
    /**
    * The optional name to be used when called by Mix.
    * Defaults to the class name, lowercased.
    *
    * Ex: mix.example();
    *
    * @return {String|Array}
    */
    name() {
    // Example:
    // return 'example';
    return ['cssModules']
    }

    /**
    * Override the generated webpack configuration.
    *
    * @param {Object} webpackConfig
    * @return {void}
    */
    webpackConfig(config) {

    this.addCssRule(config)
    this.addScssRule(config)
    }

    addCssRule(config) {
    let cssRule = config.module.rules.find(
    rule => rule.test.toString() === '/\\.css$/'
    )

    let loaders = cssRule.loaders

    delete cssRule.loaders

    cssRule.oneOf = [
    {
    resourceQuery: /module/,
    use: [
    'vue-style-loader',
    {
    loader: 'css-loader',
    options: {
    modules: true,
    localIdentName: '[local]_[hash:base64:5]',
    },
    },
    'sass-loader',
    ],
    },
    {
    use: loaders,
    },
    ]
    }

    addScssRule(config) {
    let cssRule = config.module.rules.find(
    rule => {
    return rule.test.toString() === '/\\.scss$/' }
    )

    let loaders = cssRule.loaders

    delete cssRule.loaders

    cssRule.oneOf = [
    {
    resourceQuery: /module/,
    use: [
    'vue-style-loader',
    {
    loader: 'css-loader',
    options: {
    modules: true,
    localIdentName: '[local]_[hash:base64:5]',
    },
    },
    'sass-loader',
    ],
    },
    {
    use: loaders,
    },
    ]
    }
    }
    17 changes: 17 additions & 0 deletions webpack.mix.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    const mix = require('laravel-mix')

    .... other code ...


    let CssModules = require('./CssModules')
    mix.extend('cssModules', new CssModules)

    mix.js('resources/js/app.js', 'public/js')
    .cssModules()
    .postCss('resources/css/app.css', 'public/css', [
    cssImport(),
    cssNesting(),
    tailwindcss(),
    ])

    ... other code ..