Reactjs 在反应中没有正确地格式化基金会 我试图在一个JSX文件中使用基础创建一个简单的两列页面。我已经导入了SCSS文件并测试了一些功能（即按钮，其样式设置正确），但我无法使两列并排对齐。你知道为什么这些柱子叠在一起而不是并排坐着吗

我的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'));

我的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']
            }
        }]
    }
};

---

控制台中没有错误，基础CSS出现在DOM中。

< P>尝试将App.SCSS文件更改为包含基础网格，如：

@import“基本/变量”；
//基础
@导入“基础/基础设置”；
@导入“基础”；
@包括一切；
//不包括在所有基础中：
@包括基础网格 >对我来说，为了使基础工作，我必须把这个

componentDidMount（）{
$（document.foundation（）；
}

在根组件中

另外，要使用jquery，我必须运行
const$=window.$

找到修复程序了吗？你是如何解决的？我最终切换到这个项目的React Flexbox网格。我使用
require（'style-loader！css-loader！foundation-sites/dist/css/foundation-float.min.css'）解决了我的问题
而不是
require（'style-loader！css-loader！foundation-sites/dist/css/foundation.min.css'）。谢谢你的回复。
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']
            }
        }]
    }
};