Webpack：如何包含节点模块的 css？答案

【问题标题】：Webpack: How do I include a node module's css?Webpack：如何包含节点模块的 css？
【发布时间】：2016-11-04 21:01:36
【问题描述】：

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

【问题讨论】：

我相信您需要（或者可能导入，我没有尝试过）javascript 中的 .scss。请参阅webpack docs。然后将 js 与 js blob 捆绑（打包，如果您愿意的话）。当在代码中调用 .scss 的 js require() 时，webpack 会将样式放到页面上。根本没有样式 src= 标签
hm，在我的main.js 中，我尝试了require("!style!css!sass!../node_modules/foundation-sites/scss/foundation.scss");，它编译但仍然不加载任何样式（就必须如此明确地说明路径而言似乎也不理想？）。还是我误会了？
不确定它是否与 css 相同，但我使用这样的 sweetalert 主题：require('sweetalert/dist/sweetalert.css') require('sweetalert/themes/google/google.css')当然你需要在 webpack 配置中使用正确的加载器
@import 在运行 dev 时不起作用，因为这会从浏览器加载文件，然后您将被限制在 src 文件夹中，但如果您运行 npm run build，它可能会包含 css 编译文件在dist 文件夹中

【解决方案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

【讨论】：