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

I didn't change anything to my Webpack config. I did it like this:

Note: my project's components are in a 'src/components' folder and my app.scss directly in the src folder. I am using foundation-sites v6.2.2 and vue-cli 2.2.0.

In a base component I have this:

<style src="../app.scss" lang="scss"></style>

Now in this app.scss I pasted everything from node_modules/foundation-sites/scss/settings/_settings.scss to enable customization. You will have to change one line there:

@import 'util/util';

should become:

@import '~foundation-sites/scss/util/util';

Finally add two lines at the very bottom of your app.scss:

@import '~foundation-sites/scss/foundation.scss';
@include foundation-everything;

This should cover your css.

However you will likely need to do something about javascript too, because Foundation's javascript components require some initialization. I haven't done that myself yet, but this might be helpful: http://forum.vuejs.org/topic/893/vue-js-foundation-6/6

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

1 个答案: