代码之家  ›  专栏  ›  技术社区  ›  Dhiraj Sharma

网页包中的基础抛出错误

  •  -1
  • Dhiraj Sharma  · 技术社区  · 7 年前

    我第一次使用foundation,它抛出了一些不真实的单词u 可以看到,在我附加的图像文件中,我不知道这里发生了什么 我也设置了外部和插件,但仍然不起作用。 我已经安装了这个css-loader@0.23.1脚本-loader@0.6.1风格-loader@0.13.0 jquery@2.2.1基金会-sites@6.2.0.

    网页包。配置。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'
    }
    

    应用程序。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')
        );
    

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  0
  •   Michael Jungo    7 年前

    你想申请 css-loader 到JavaScript文件。

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

    预期CSS和JavaScript显然不是有效的CSS,因此无法解析。假设您只想使用CSS,则需要导入 dist/foundation.min.css

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

    另一方面,通常不鼓励使用内联加载器,您应该为其定义一个规则 .css