Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example using this with a webpack #2

Open
FDiskas opened this issue Aug 16, 2017 · 5 comments
Open

Example using this with a webpack #2

FDiskas opened this issue Aug 16, 2017 · 5 comments

Comments

@FDiskas
Copy link

FDiskas commented Aug 16, 2017

Trying this to integrate this in webpack3. Is it posible?
Could you please provide an example

@FDiskas
Copy link
Author

FDiskas commented Aug 16, 2017

const esCssModules = require('es-css-modules');
...
            {
                test: /\.s?css$/,
                use: extractSass.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                module: true,
                                sourceMap: true,
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true,
                                plugins() {
                                    return [
                                        esCssModules({
                                            jsFiles: 'src/index.js',
                                        }),
                                        autoprefixer
                                    ];
                                }
                            }
                        },
                        {loader: 'resolve-url-loader'},
                        {loader: 'sass-loader', options: {sourceMap: true}}
                    ],
                    fallback: 'style-loader'
                })
            },

Getting error Module build failed: TypeError: esCssModules is not a function

@FDiskas
Copy link
Author

FDiskas commented Aug 16, 2017

If I try to load module like const esCssModules = require('es-css-modules').default;
then I get warning

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.9, but es-css-modules uses 5.2.17. Perhaps this is the source of the error below.

then some errors in build process like

ERROR in ./assets/scss/main.scss
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

in main.scss nothing special :)

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

currently using "postcss-loader": "^2.0.6"

Tried to downgrade to postcss-loader@1.3.3 warning disappeared but error still the same

@FDiskas
Copy link
Author

FDiskas commented Aug 16, 2017

P.S. https://github.com/jacobp100/es-css-modules/blob/master/rollup.config.js#L5
according documentation

For Node.js:
compile to a CommonJS module
$ rollup main.js --format cjs --output bundle.js

@FDiskas
Copy link
Author

FDiskas commented Aug 16, 2017

Related? babel/babel#5893

@jacobp100
Copy link
Owner

I'm not sure this can be run with webpack to be honest, but feel free to try and prove me wrong! It gets its own dependency graph, and generates files that are used by webpack. It was really intended to be run before webpack. Hope this helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants