Is it possible to let webpack bundle CSS without import css in my entry js?

Question

Importing CSS file in js is webpack-specific. If I use gulp+browserify I will need browserify-css. I feel uncomfortable with writing source code that directly depends on having browserify-css or webpack(especially I am not writing React/Vue app, just vanilla js).

I find some Q&A related to this, e.g. import CSS and JS files using Webpack and Can I build sass/less/css in webpack without requiring them in my JS?

They suggested multiple-entry-points config (if I understand them correctly), i.e. create a dummy js file with only import css and add another entry in webpack.config.js for that js so the real entry js does not need to import css

I tried it but I still don't like the solution. Is there any other solution? If someone can confirm there is none I will be satisfied too. B/C someone else raised the same issue against extract-text-webpack-plugin and a reply said

webpack natively only understands 'js-ish' files and using a 'css-ish' file as an entry point isn't recommended (imho it should even fail),so you will get a dummy bundle per css entry to 'handle' that. require/import the css inside an entrypoint

Qiulang · Accepted Answer · 2018-09-06 04:33:37Z

10

I asked the same question at https://gitter.im/webpack/webpack and no reply either I have almost gave up then I found it was answered here Webpack extract text plugin outputting .js and .css file for styles entry and Can I use webpack to generate CSS and JS separately? here.

So setting webpack.config.js like this webpack will output index.js & index.css

I don't need to import css in index.js any more!

entry:{
  index: [
    './src/js/index.js',
    "./resources/css/index.scss"
  ]
},
output:{
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
},

edited Sep 6, 2018 at 4:33

answered Sep 6, 2018 at 4:19

Qiulang

12.9k22 gold badges99 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Avner Moshkovitz Over a year ago

This worked for me when everything is handled within the bundle.js. But it doesn't work in the case where a function from bundle.js needs to be exposed to an external calling .html file see my question here

Collectives™ on Stack Overflow

Is it possible to let webpack bundle CSS without import css in my entry js?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related