Handle CSS with webpack?

sebj54 commented 5 years ago

Hi there,

I don't know if my question has its place here, but I'm trying to bundle this dependency's styles in my minified CSS file. Actually, I have a project initialized with Vue CLI, so it uses Webpack to bundle everything.

So I wanted to bundle the CSS of this plugin with the rest of my styles. I can't find a way to do it!

Actually it is present in the <head> tag, inlined (in a <style> tag). I would like to remove this tag and have the CSS with the rest.

Thanks for your help!

johndatserakis commented 5 years ago

Hey,

Hmm, yea I see what you're saying. Well this component is packaged with the css and javascript together as there is only a small amount of css that is not meant to be changed out, but rather overwritten.

What you're seeing in your build is Webpack taking the component and packaging it up for production how it sees fit - in this case it's sticking the css in style tags in the head. This is a normal way of doing it, although of course there are other ways. I use Vue-CLI for my projects too and this is how it does it.

If you want to overwrite this components styles, that's when you'd make another file in which you would overwrite the specific selectors (I have the class tree at the bottom of the readme). Then include that file in your css and you'll be good. Let me know if that helps.

sebj54 commented 5 years ago

Hi!

Thanks for your quick answer :)

Actually, the problem is not to override the styles, I achieved it without difficulty, your documentation is clear enough for this! This is rather a performance issue for me. I would want to have all my styles in an external minified CSS file so it can be cached and not loaded each time with HTML. I also use prerendering (https://github.com/chrisvfritz/prerender-spa-plugin) and sadly, when you're hitting a subpage of my app, Webpack readds the <style> tag for the styles of your plugin.

I don't know if I'm clear (sorry I'm not a native English speaker!) with this "issue". I think I just don't know how to configure Webpack to do what I expect. I made this issue so maybe you can help me and add a "how-to" in your README :)

Here is my vue.config.js file:

const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: fs.readFileSync('src/assets/scss/variables.scss', 'utf-8'),
        includePaths: ['./src/assets/scss/']
      }
    }
  }
}

The rest is default so It seems weird to me to have two ways to handle CSS for a single project.

johndatserakis commented 5 years ago

Ok I see what you mean. Hmm, I'm sorry but I don't have an answer right away for what you're requesting.

In looking at the Vue-CLI docs, I found this part titled css-extract. There it talks a bit about what you're trying to do. I'm not sure it's applicable of course because this component is outside of your main project.

Also, I see vue-loader has something in their docs about this. Perhaps in the future I'll research how to add this option to the current rollup build. Thank you and I'm sorry I can't get you this right away. The only saving grace is that the css is such a small size and luckily won't be a huge burden on your site. If it's an absolute must have then maybe you can fork it and get it going for now.

For now, I will be studying this and how to implement it.

sebj54 commented 5 years ago

Thanks for having a look at it anyway, it's really appreciable!

I took a brief look at the docs you pointed. I'm already using CSS extraction from Vue-CLI (default setting) and the vue loader extract plugin seems to be a pretty hard work: reading docs, finding a plugin or writing it, configuration… Like you said, it's not a huge burden because it's small. The saddest point of my current case is that I have the CSS style loaded twice because of pre-rendering.

Just an idea, could you provide an option to disable CSS from your plugin? With this option, maybe I could import your styles directly from my project (with Sass or in my vue config) or in last resort copy them in my project.

johndatserakis commented 5 years ago

Hmm, no I think putting the option would make it more complicated. If you can hang on for about a week - I plan to fix this issue this weekend. Thank you.

sebj54 commented 5 years ago

It would be awesome if you can! Sure I can wait, thanks for your concern on this :)

johndatserakis commented 5 years ago

Alright bud - I just pushed v4.0.2 - it's got what you're looking for. There's a few different ways to import the library js/css now - you'll be able to mix and match to fit your needs.

Let me know if you get everything working alright.

sebj54 commented 5 years ago

Sorry for not having answered sooner, I just tested and it's fine now!

A big thank you for the quick add and the clean documentation 👌 👍

johndatserakis commented 5 years ago

Thank you - our pleasure.

johndatserakis / vue-cookie-accept-decline

Handle CSS with webpack? #8