Webpack:如何包含节点模块的CSS？

Question

我正在使用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复制所需的文件似乎是一个不合逻辑或不太理想的解决方案.

Answer 1

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

注意:我的项目组件位于'src/components'文件夹中,而我的app.scss直接位于src文件夹中.我使用的是基础网站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