webpack 中的 Foundation 拋出錯誤

Question

我第一次使用基礎它拋出錯誤一些inavlid詞你可以在我附加的圖像文件中看到我不知道這里發生了什么。這是我的webpack配置文件，我正在設置入口點。 我也在設置外部和插件，但仍然無法正常工作。 我已經安裝了這個依賴項 css-loader@0.23.1 script-loader@0.6.1 style-loader@0.13.0 jquery@2.2.1foundation-sites@6.2.0。

webpack.config.js -

 var webpack = require('webpack');

 module.exports = {
  entry:[
    'script!jquery/dist/jquery.min.js',
    'script!foundation-sites/dist/foundation.min.js',
    './app/app.jsx'
],
externals:{
    jquery: 'jQuery'
},
plugins : [
    new webpack.ProvidePlugin({
        '$' : 'jquery',
        'jQuery' : 'jquery'
    })

],
output:{
    path:__dirname,
    filename:'./public/bundle.js',
},
resolve:{
    root:__dirname,
    alias:{
        Main:'app/components/Main.jsx',
        Nav: 'app/components/Nav.jsx',
        Weather : 'app/components/Weather.jsx',
        WeatherForm : 'app/components/WeatherForm.jsx',
        WeatherMessage : 'app/components/WeatherMessage.jsx',
        About : 'app/components/About.jsx',
        Examples: 'app/components/Examples.jsx',
        openWeatherMap : 'app/api/openWeatherMap.jsx'
    },
    extensions:['','.js','.jsx']
},
module:{
    loaders:[
        {
            loader:'babel-loader',
            query:{
                presets:['react','es2015']
            },
            test:/\.jsx?$/,
            exclude:/(node_modules|bower_components)/
        }
    ]
},
devtool: 'cheap-module-eval-source-map'
}

app.jsx :-

   var React = require('react');
   var ReactDOM = require('react-dom');
   var {Route, Router, IndexRoute, hashHistory} = require('react-router');
   var Main = require('Main');
   var Weather = require('Weather');
   var About = require('About');
   var Examples = require('Examples')


   //load foundation
      require('style!css!foundation-sites/dist/foundation.min.js');
      $(document).foundation();

    ReactDOM.render(
   <Router history={hashHistory}>
   <Route path="/" component={Main}>
   <Route path="about" component={About}/>
   <Route path="examples" component={Examples}/>
     <IndexRoute component={Weather}/>
        </Route>
    </Router>,
    document.getElementById('app')
    );

Answer 1

您正在嘗試將css-loader應用於 JavaScript 文件。

require('style!css!foundation-sites/dist/foundation.min.js');
//                                                      ^^

css-loader需要 CSS，而 JavaScript 顯然不是有效的 CSS，因此無法解析。 假設您只想使用 CSS，則需要導入dist/foundation.min.css 。

require('style!css!foundation-sites/dist/foundation.min.css');

附帶說明一下，通常不鼓勵使用內聯加載器，您應該為.css文件定義規則。