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-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
【讨论】:
谢谢,我有点挣扎。完美答案!以上是关于Webpack:如何包含节点模块的 css?的主要内容,如果未能解决你的问题,请参考以下文章
找不到模块'webpack/lib/web/FetchCompileWasmTemplatePlugin'