CODEWITHSUNDEEP
webpackvue.js
dylanized
dylanized

Reputation: 3855

How do I use Webpack 4 to export vendor CSS

I am building a small Vue.js project using Webpack 4.

In the style block of my App.vue component, I can import bootstrap.scss into my main.js bundle, then export it to main.css using the mini-css-extract-plugin.

But if I also have custom styles, the Boostrap (vendor) CSS is mixed together with my custom CSS.

I'm wondering, how can make it export the Bootstrap (vendor) CSS into its own named, hashed chunk? And keep the custom CSS in its own named, hashed chunk?

It looks like you can explicitly name JavaScript imports, with webpackChunkName magic comments:

https://webpack.js.org/api/module-methods/#import-

Similarly, is there a way to explicitly name my Bootstrap CSS import?

Thanks for any help!

Upvotes: 1

Views: 1742

Answers (2)

dylanized
dylanized

Reputation: 3855

I stumbled onto css-entry-webpack-plugin, which enables the clean creation of CSS-only bundles.

https://www.npmjs.com/package/css-entry-webpack-plugin

module.exports = {
  entry: {
    "bootstrap": "node_modules/bootstrap/dist/bootstrap.css",
    "main": "src/index.js"
  },
  output: {
    path: "dist",
    filename: "[name].[hash].js"
  },
  module: {
    rules: [
      // This is required
      {
        test: /\.css$/,
        use: "css-loader"
      }
    ]
  },
  plugins: [
    new CssEntryPlugin({
      output: {
        filename: "[name].[hash].css"
      }
    })
  ]
};

Unfortunately, this plugin appears to not support Webpack 4 yet...

Upvotes: 0

felixmosh
felixmosh

Reputation: 35503

You can add additional js entry point to your app, that will import only Bootstrap.css, and name it what ever you want. That will generate css file with that name.

Upvotes: 1

Related Questions