是否可以让webpack在我的条目js中不导入CSS的情况下捆绑CSS? [英] Is it possible to let webpack bundle CSS without import css in my entry js?

问题描述

在js中导入CSS文件是特定于Webpack的.如果使用 gulp + browserify ，则需要 browserify-css .对于编写直接依赖于browserify-css或webpack的源代码，我感到不自在(尤其是我不是在编写React/Vue应用，而只是在编写js).

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).

我发现与此有关的一些问答.使用Webpack导入CSS和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?

他们建议进行多入口点配置(如果我正确理解的话)，即仅使用 import css 创建一个虚拟js文件，并在webpack.config.js中为该js添加另一个条目，因此真正的条目js不需要 import css

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

我尝试过，但是我仍然不喜欢这种解决方案.还有其他解决方案吗?如果有人可以确认没有，我也将感到满意.B/C有人针对 extract-text-webpack-plugin 并回答

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本机仅理解"js-ish"文件，并使用不建议将'css-ish'文件用作入口点(imho应该甚至失败)，因此每个CSS条目都会为"handle"提供一个虚拟捆绑包那.要求/导入入口点内的CSS

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

推荐答案

我在 https://上问了同样的问题gitter.im/webpack/webpack ，我几乎都没有放弃，然后我在这里找到了答案.可以在这里使用webpack分别生成CSS和JS吗?.

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.

因此将webpack.config.js设置为此类webpack将输出 index.js&index.css

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

我不再需要在 index.js 中导入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'
},

这篇关于是否可以让webpack在我的条目js中不导入CSS的情况下捆绑CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！