Vuejs: Includes css file in webpack minified css

Question

in my vuejs project i want to include my personnal css files to the generated minified css file generated from the styles in *.vue files

In App.vue i have:

<style lang="scss">
  @import '/static/css/AdminLTE.min.css';
  @import '/static/css/style.css';
  @import '/static/js/plugins/pace/pace.min.css';
</style>

And i use ExtractTextPlugin to extract and minify styles in *.vue files:

 // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),

So i my website the app.conbtenthash.css file from the plugin and the three files i import. But is there anyway to include my three imported file in the app css file ?

Than you !

score 0 · Answer 1 · answered Nov 08 '17 at 17:46

Docs: https://vue-loader.vuejs.org/en/configurations/extract-css.html

Similar questions: Vue.js + Webpack multiple style tas output | how to extract vue files style into one seperate style.css file

So you should specify single filename in ExtractTextPlugin

new ExtractTextPlugin("style.css")

Vuejs: Includes css file in webpack minified css

1 Answers1