Vue.js Foundation Webpack配置

我只是想将 foundation.css 文件添加到我的Vue webpack应用程序中 . 我已经安装了基础

- npm install foundation-sites .

然后我安装了提取文本插件

-- npm install extract-text-webpack-plugin 
--save-dev.

我不确定如何进行下一步 .

APP.vue

<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>

<script>
import Hello from './components/Hello'

export default {
name: 'app',
components: {
Hello
}
}
</script>

<style>
import '../node_modules/foundation-sites/dist/foundation.css'
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
 }
 </style>

Webpack.config.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: './src/main.js'
 },
 output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ?      config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
 },
 resolve: {
 extensions: ['', '.js', '.vue'],
 fallback: [path.join(__dirname, '../node_modules')],
  alias: {
  'vue$': 'vue/dist/vue',
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
  }
  },
  resolveLoader: {
  fallback: [path.join(__dirname, '../node_modules')]
  },
 module: {
  preLoaders: [
  {
    test: /\.vue$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: /node_modules/
  }
   ],
   loaders: [
  {
    test: /\.vue$/,
    loader: 'vue'
  },
  {
    test: /\.js$/,
    loader: 'babel',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.json$/,
    loader: 'json'
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
  ]
 },
 eslint: {
 formatter: require('eslint-friendly-formatter')
 },
 vue: {
  loaders: utils.cssLoaders(),
 postcss: [
  require('autoprefixer')({
    browsers: ['last 2 versions']
  })
 ]
 },
 vue: {
loaders: {
  css: ExtractTextPlugin.extract("css")
}
},
 plugins: [
new ExtractTextPlugin("style.css")
]
}

将此添加到 index.html 文件中：

`<link rel="stylesheet" href="node_modules/foundation- sites/dist/foundation.css"> `

一个菜鸟会做的只是为了看它是否会起作用，当应用程序处于活动状态时，源内没有任何内容 .

更新 - 现在在终端中收到此错误 -

错误在./~/extract-text-webpack-plugin/loader.js?{"remove":true}！ . /〜/ css-loader！/〜/ vue-center / lib / style -rewriter.js？ id = data-v-511fb858！./~ / vue-loader / lib / selector.js？type = styles＆index = 0！./ src / App.vue模块构建失败：CssSyntaxError：/ Users / uz067252 / Documents / Development / Vue / xwebpack / App.vue？40a2fca0：21：0：Input.error中的未知单词（/Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/input.js： 111：22）在Parser.other的Parser.unknownWord（/Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/parser.js:457:26）（/ Users / uz067252 / Documents / Development / Vue / xwebpack / node_modules / vue-loader / node_modules / postcss / lib / parser.js:174:14）在Parser.loop（/ Users / uz067252 / Documents / Development / Vue / xwebpack / node_modules / vue-loader / node_modules / postcss / lib / parser.js:81:26）在解析时（/Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/parse.js： 26:16）在ne w LazyResult（/Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/lazy-result.js:70:24）在Processor.process（/ Users / uz067252 / Documents /在Object.module.exports上开发/ Vue / xwebpack / node_modules / vue-loader / node_modules / postcss / lib / processor.js：117：12）（/ Users / uz067252 / Documents / Development / Vue / xwebpack / node_modules / vue- loader / lib / style-rewriter.js：96：6）@ . / src / App.vue 4：0-193