npm – Webpack：如何包含节点模块的css？

我正在使用 vue-cli来构建一个Vue.js Webpack应用程序,我很困惑如何,作为一个基本的例子,包括像 Zurb Foundation这样的东西.

我已经安装了所需的依赖项和加载器,例如sass-loader和css-loader,但我只是在理解如何配置Webpack进行编译和包含的基本层面上感到困惑,例如node_modules / foundation-sites / scss / foundation.scss

在我的webpack配置中,我有：

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

在我的基本App.vue组件中,我有：

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

在我的app.scss中,我尝试过,但无济于事：

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

(在许多其他语法不正确的尝试中引发错误)

我相信我缺少一些关于Webpack使用npm或bower包的方式的基本信息.任何方向都会受到高度赞赏,因为这似乎是一个简单的问题,没有我能找到的明确答案.

从node_modules复制所需的文件似乎是一个不合逻辑或不太理想的解决方案.

解决方法

我没有改变我的Webpack配置.我是这样做的：

注意：我的项目组件位于’src / components’文件夹中,而我的app.scss直接位于src文件夹中.我正在使用foundation-sites v6.2.2和vue-cli 2.2.0.

在基本组件中我有这个：

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

现在在这个app.scss中我粘贴了node_modules / foundation-sites / scss / settings / _settings.scss中的所有内容以启用自定义.
你必须在那里换一行：

@import’util / util’;

应成为：

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

最后在app.scss的最底部添加两行：

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

这应该涵盖你的CSS.

但是你也可能需要对javascript做一些事情,因为Foundation的javascript组件需要一些初始化.我自己还没有这样做,但这可能会有所帮助：http://forum.vuejs.org/topic/893/vue-js-foundation-6/6