基础没有在React中正确格式化

问题描述：

我想在React JSX文件中使用Foundation创建一个简单的两列页面。我已经导入了SCSS文件并测试了一些功能（即按钮，它的风格正确），但我无法将两列并排排列。任何想法为什么这些列堆叠而不是并排坐在一起？基础没有在React中正确格式化

我index.jsx文件

var React = require('react'); 
var ReactDOM = require('react-dom'); 
require('jquery'); 

import './styles/app.scss'; 

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

class Markdown extends React.Component { 
    render() { 
    return (
     <div className="container"> 
     <div className="row"> 
      <div className="small-6 columns">6 columns</div> 
      <div className="small-6 columns">6 columns</div> 
      <button className="success button">Test</button> 
     </div> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<Markdown />, document.getElementById('app'));

我app.scss文件：

@import "base/variables"; 

//Foundation 
@import "base/foundation-settings"; 
@import "foundation"; 
@include foundation-everything;

我webpack.config.js文件：

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
    entry: [ 
     'script-loader!jquery/dist/jquery.min.js', 
     'script-loader!foundation-sites/dist/js/foundation.min.js', 
     './app/index.jsx' 
    ], 
    externals: { 
     jquery: 'jQuery' 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      'jQuery': 'jquery' 
     }) 
    ], 
    output: { 
     path: __dirname, 
     filename: 'bundle.js' 
    }, 
    resolve: { 
     alias: { 

     }, 
     extensions: ['*', '.js', '.jsx'] 
    }, 
    module: { 
     rules: [{ 
      test: /\.scss$/, 
      use: [{ 
       loader: "style-loader" // creates style nodes from JS strings 
      }, { 
       loader: "css-loader" // translates CSS into CommonJS 
      }, { 
       loader: "sass-loader", // compiles Sass to CSS 
       options: { 
        sourceMap: true, 
        includePaths: [ 
         path.resolve(__dirname, './node_modules/foundation-sites/scss'), 
        ] 
       } 
      }] 
     }, { 
      test: /\.jsx?$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel-loader', 
      options: { 
       presets: ['react', 'es2015'] 
      } 
     }] 
    } 
};

里有没有错误控制台，Foundation CSS显示在DOM中。

找到了解决？你是如何解决它的？ –

我最终切换到此项目的React Flexbox Grid。 – wildlifehexagon

我用'require（'style-loader！css-loader！foundation-sites/dist/css/foundation-float.min.css'）解决了我的问题;''而不是'require（'style-loader！css-loader ！基础的网站/距离/ CSS/foundation.min.css'）;'。谢谢回复。 –

答

试着改变你的app.scss文件，包括基础网格，像这样：

@import "base/variables"; 
 

 
//Foundation 
 
@import "base/foundation-settings"; 
 
@import "foundation"; 
 
@include foundation-everything; 
 

 
// Not included in foundation-everything: 
 
@include foundation-grid;

从Foundation 6 SASS docs：

我们的起步项目包括的完整列表进口，使其很容易注释掉你不需要的组件。完整列表还包括下面的。 @import'foundation';

@include foundation-global-styles;

@include foundation-xy-grid-classes;

// @ include foundation-grid;

// @ include foundation-flex-grid;

@include foundation-flex-classes;

...

，我打我的头在桌子上出于同样的原因，几乎相同的设置，你，和发生在技术文档在这个小提示绊倒。无论出于何种原因，除了“基础一切”之外，还需要导入“基础网格”和“基础柔性网格”。

我希望这有助于！

答

对我来说，做基础的工作，我必须把这个

componentDidMount() { $(document).foundation(); }

根组件。

此外，使用jquery，我要运行 const $ = window.$;

set up foundation

基础没有在React中正确格式化

相关推荐