Nearly-Pickled Module

    @modular-css/webpack

    28.3.2 • Public • Published

    @modular-css/webpack NPM Version NPM License NPM Downloads

    Webpack 2/3/4 support for modular-css.

    This package contains two entry points, you will need to use both in tandem for things to work!

    1. @modular-css/webpack/plugin provides a webpack plugin you can use to transform imported .css files into lookup objects while outputting CSS to disk.

    2. @modular-css/webpack/loader provides the file loader that does the actual transformation on files.

    Install

    > npm i @modular-css/webpack

    Usage

    // webpack.config.js
    const path = require("path");
        
    const CSSPlugin = require("@modular-css/webpack/plugin");
    
    module.exports = {
        entry   : "./input.js",
        output  : {
            path : path.resolve(__dirname, "dist"),
            filename : "./output.js"
        },
        module : {
            rules : [{
                test : /\.css$/,
                use  : "@modular-css/webpack/loader"
            }]
        },
        plugins : [
            new CSSPlugin({
                css  : "./output.css",
                json : "./output.json"
            })
        ]
    });

    Options

    Plugin Options

    css

    Location to write the generated CSS file to, relative to output.path just like output.filename

    json

    Location to write out the JSON mapping file to, relative to output.path just like output.filename

    processor

    Pass an already-instantiated Processor instance to the Webpack plugin. It will then add any files found when traversing the modules to it and both the Webpack-discovered and any already-existing files will be output in the final CSS.

    Shared Options

    All other options are passed to the underlying Processor instance, see Options.

    Loader Options

    styleExport

    You can disable exporting the style string, eg import { styles } from "./style.css";, by setting styleExport to false. Defaults to true.

    ...
        module : {
            rules : [{
                test : /\.css$/,
                use  : {
                    loader  : "@modular-css/webpack/loader",
                    options : {
                        styleExport : true,
                    }
                }
            }]
        },
    ...

    defaultExport

    You can disable exporting classes as default export, eg import styles from "./style.css";, by setting defaultExport to false. Defaults to true.

    ...
        module : {
            rules : [{
                test : /\.css$/,
                use  : {
                    loader  : "@modular-css/webpack/loader",
                    options : {
                        defaultExport : false,
                    }
                }
            }]
        },
    ...

    variableDeclaration

    You can set variable declaration kind, eg var mc_rule = ...;, by setting variableDeclaration to var. Defaults to const.

    ...
        module : {
            rules : [{
                test : /\.css$/,
                use  : {
                    loader  : "@modular-css/webpack/loader",
                    options : {
                        variableDeclaration : "var",
                    }
                }
            }]
        },
    ...

    Install

    npm i @modular-css/webpack

    Homepage

    m-css.com

    DownloadsWeekly Downloads

    78

    Version

    28.3.2

    License

    MIT

    Unpacked Size

    9.32 kB

    Total Files

    5

    Last publish

    Collaborators

    • tivac