我正在使用
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包的方式的基本信息.任何方向都会受到高度赞赏,因为这似乎是一个简单的问题,没有我能找到的明确答案.
解决方法
我没有改变我的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’;
@import '~foundation-sites/scss/foundation.scss'; @include foundation-everything;
这应该涵盖你的CSS.
但是你也可能需要对javascript做一些事情,因为Foundation的javascript组件需要一些初始化.我自己还没有这样做,但这可能会有所帮助：http://forum.vuejs.org/topic/893/vue-js-foundation-6/6
