Vue.js + Foundation + Webpack 配置

Posted 2023-02-23

【中文标题】Vue.js + Foundation + Webpack 配置

【英文标题】：Vue.js + Foundation + Webpack configuration

【发布时间】：2017-02-28 13:29:26

【问题描述】：

我只是想将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"> ` 

菜鸟会做一些事情来看看它是否可以工作，当应用程序运行时，源代码中不会出现任何内容。

更新 -- 现在在终端中得到这个错误 --

ERROR in ./~/extract-text-webpack-plugin/loader.js?"remove":true!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-511fb858!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: CssSyntaxError: /Users/uz067252/Documents/Development/Vue/xwebpack/App.vue?40a2fca0:21:0: Unknown word
    at Input.error (/Users/uz067252/Documents/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/postcss/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-loader/lib/style-rewriter.js:96:6)
 @ ./src/App.vue 4:0-193

【参考方案1】：

@flyingSmurfs : 我看到该项目是使用vue-cli 生成的。所以 css-loader 已经安装好了。loaders: utils.cssLoaders() 将在 webpack 中配置 css-loader。

@userlkjsflkdsvm :import 'xxx.css' 应放入<script>..</script> 或*.js。 我建议把这句话放在main.js（你项目的入口js文件）中。 我看到你在 <style>...</style> 部分导入 css。错了。

【参考方案2】：

基础 CSS 未加载，因为没有应用 CSS 加载器

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

相反，你需要这样的东西

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

【讨论】：

我更新了问题，现在终端出现错误

@userlkjsflkdsvm 看起来你没有 CSS 加载器！