npm - 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 文件夹中。我正在使用 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