R
R
Romancho2019-03-22 11:43:32
Sass
Romancho, 2019-03-22 11:43:32

How to split styles from one npm module?

There is a package (company-pack) in the local npm repository. Inside it has its own SASS grid and two versions: desktop.scss and mobile.scss, which collect different styles (this is important).
Method 1 works:

entry: {
        desktop: './node_modules/company-pack/scss/desktop.scss',
        mobile: './node_modules/company-pack/scss/mobile.scss'
    },
module: {
    	rules: [
            {
                test: /\.js$/,
                exclude: ['/node_modules/'],
                use: [{
                    loader: 'babel-loader'
                }]
            },
            {
                test: /\.scss$/,
                use: [
                        MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader:'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]

  },
plugins: [
  new FixStyleOnlyEntriesPlugin(),
  new MiniCssExtractPlugin(is_production ? {
            filename: 'css/[name].min.css',
            chunkFilename: 'css/[name].min.css',
            sourceMap: true,
        } : {
            filename: 'css/[name].css',
            chunkFilename: 'css/[name].css',
            sourceMap: false,
        }),

  ]

But in the first method, paths to scss are written by hand. And I wanted the call to be like an import from main.js
and the result of the webpack work was two files: desktop.css and mobile.css. At the moment it collects everything in one main.css if in webpack.config.js
entry: {
        main: './main.js,
    },

and main.js and index.js of the package
import { CssModules } from 'company-pack';

import Desktop from './scss/desktop.scss';
import Mobile from './scss/mobile.scss';

export default CssModules(Desktop, Mobile);

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question