Webpack: How to enable node css module?

Question

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

I installed the necessary dependencies and downloaders, such as sass-loader and css-loader , but just got confused at the fundamental level of understanding how you can configure Webpack to compile and include, for example node_modules/foundation-sites/scss/foundation.scss

In my webpack configuration, I have:

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

In my core component of App.vue , I have:

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

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

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

(among many other syntactically incorrect attempts that threw errors)

I believe that I am missing something fundamental in how Webpack works with npm or bower packages. Any direction would be greatly appreciated as this seems like a simple problem without a clear answer that I can find.

Copying the necessary files from node_modules seems illogical or not an ideal solution.

Answer 1

I have not changed anything in my Webpack configuration. I did it like this:

Note. My project components are in the src / components folder and my app.scss application directly in the src folder. I use the basics sites v6.2.2 and vue-cli 2.2.0.

In the base component, I have the following:

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

Now in this app.scss I inserted everything from node_modules / foundation-sites / scss / settings / _settings.scss to enable the setting. You will need to change one line:

@import 'util/util';

should become:

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

Finally, add two lines to 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 have to do something with javascript, because the javascript Foundation components need some initialization. I have not done this yet, but it may be useful: http://forum.vuejs.org/topic/893/vue-js-foundation-6/6