Webpack: How do I include a node module's css?

Question

I am using vue-cli to scaffold a Vue.js + Webpack app and am confused how to, as a basic example, include something like Zurb Foundation.

I have installed required dependencies and loaders such as sass-loader and css-loader but am just confused on a fundamental level of understanding how one can configure Webpack to compile and include, for example node_modules/foundation-sites/scss/foundation.scss

In my webpack config I have:

module: {
  loaders: [
    {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"],
      include: projectRoot
    } ...

In my basic App.vue component I have:

<style src="./scss/app.scss" lang="scss"></style>

And in my app.scss I have tried, to no avail:

@import '~foundation-sites/scss/foundation.scss';

(among many other syntactically incorrect attempts that threw errors)

I believe I'm missing something fundamental about the way Webpack works with npm or bower packages. Any direction would be greatly appreciated as this seems to be a simple problem without a clear answer that I can find.

Copying required files over from node_modules seems like an illogical or not so ideal solution as well.

Answer 1

I didn't change anything to my Webpack config. I did it like this:

Note: my project's components are in a 'src/components' folder and my app.scss directly in the src folder. I am using foundation-sites v6.2.2 and vue-cli 2.2.0.

In a base component I have this:

<style src="../app.scss" lang="scss"></style>

Now in this app.scss I pasted everything from node_modules/foundation-sites/scss/settings/_settings.scss to enable customization. You will have to change one line there:

@import 'util/util';

should become:

@import '~foundation-sites/scss/util/util';

Finally add two lines at the very bottom of your app.scss:

@import '~foundation-sites/scss/foundation.scss';
@include foundation-everything;

This should cover your css.

However you will likely need to do something about javascript too, because Foundation's javascript components require some initialization. I haven't done that myself yet, but this might be helpful: http://forum.vuejs.org/topic/893/vue-js-foundation-6/6