Vue.js + Foundation + Webpack設定

Question

私はVue webpackアプリにfoundation.cssファイルを追加しようとしています。 ファンデーションは

でインストールしました。

私は、私は次のステップについて移動する方法がわからないエキステキストプラグイン

-- 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"> ` 

noobのは、それだけであれば見ることだろう何かアプリが稼動しているときは、ソース内に何も表示されません。

UPDATE - ターミナルに今、このエラーを取得 - ./~/extract-text-webpack-plugin/loader.js?{"remove":true}!./~/で

ERROR css-loader！/〜/ vue-loader/lib/style-rewriter.js？id = data-v-511fb858！/〜/ vue-loader/lib/selector.js？type = styles &インデックス= 0！ ./src/App.vue モジュールビルドに失敗しました：CssSyntaxError：/Users/uz067252/Documents/Development/Vue/xwebpack/App.vue?40a2fca0:21:0：Unknown word in Input.error（/ Users/uz067252 /ドキュメント/開発/ Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/input.js：111：22） でParser.unknownWord（/ Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue -loader/node_modules/po stcss/lib/parser.js：457：26） at Parser.other（/Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/parser.js:174:14） ） at Parser.loop（/Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/parser.js:81:26） at parse（/ Users/uz067252/Documents /Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/parse.js:26:16） 新しいLazyResult（/ Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader）にあります。 （/ Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/processorに/node_modules/postcss/lib/lazy-result.js:70:24） があります。 js：117：12） Object.module.exports（/ Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-lo ADER/libに/スタイルrewriter.js：96：./src/App.vue 4 @ 6） ：0から193

Answer 1

import '../node_modules/foundation-sites/dist/foundation.css'. 

それに適用されていないCSSローダはありませんので、CSSがロードされていない基礎

は、代わりにあなたはこの

require("!style!css!sass!../node_modules/foundation-sites/dist/foundation.css"); 

Answer 2

@flyingSmurfsようなものが必要：
私はプロジェクトがvue-cliを使用して生成されたました。 css-loaderがインストールされていました。
loaders: utils.cssLoaders()は、webpackにcss-loaderを設定します。

@userlkjsflkdsvm：
import 'xxx.css'は<script>..</script>または*.jsに入れるべきです。
文章をmain.js（あなたのプロジェクトのjsファイル）に入れることをお勧めします。
<style>...</style>セクションにcssをインポートするのを見ました。違います。