我只是想將foundation.css文件添加到我的Vue webpack應用程序中。 我已經安裝了基礎通過Vue.js + Foundation + 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}!./~/ ERROR css-loader！./〜/ vue-loader/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 /文檔/ Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/input.js：111：22） at 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） at new LazyResult（/ Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader /node_modules/postcss/lib/lazy-result.js:70:24） at Processor.process（/ Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-loader/node_modules/postcss/lib/processor。 js：117：12） at Object.module.exports（/ Users/uz067252/Documents/Development/Vue/xwebpack/node_modules/vue-lo阿德/ lib目錄/風格rewriter.js：96：6） @ ./src/App.vue 4：0-193
我更新了問題，現在終端出現錯誤 – userlkjsflkdsvm
@userlkjsflkdsvm看起來像你沒有CSS加載器！ – highFlyingDodo