Webpack:如何包含节点模块的 css?

Posted

技术标签:

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

我正在使用 vue-cli 搭建 Vue.js + Webpack 应用程序,但我很困惑如何作为基本示例包含 Zurb Foundation 之类的内容。

我已经安装了所需的依赖项和加载器,例如 sass-loadercss-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

【讨论】:

谢谢,我有点挣扎。完美答案!

以上是关于Webpack:如何包含节点模块的 css?的主要内容,如果未能解决你的问题,请参考以下文章

节点模块的 CSS

找不到模块'webpack/lib/web/FetchCompileWasmTemplatePlugin'

在节点模块中处理__dirname

webpack

如何在 webpack encore 文件之外使用节点模块?

如何在 Webpack 4 中启用 SASS 模块