reactjs - React 中 Foundation 的格式不正确

Question

我正在尝试在 React JSX 文件中使用 Foundation 制作一个简单的两列页面。我已经导入了 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'));

我的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 中。

Answer 1

尝试更改您的 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 :

Our starter projects include the full list of imports, making it easy to comment out the components you don't need. A full list is also included below. @import 'foundation';

@include foundation-global-styles;

@include foundation-xy-grid-classes;

//@include foundation-grid;

//@include foundation-flex-grid;

@include foundation-flex-classes;

...

出于同样的原因，我正用头敲 table ，设置与你几乎相同，并且碰巧在技术文档中偶然发现了这个小提示。无论出于何种原因，如果您需要的话，除了“foundation-everything”之外，还需要导入“foundation-grid”和“foundation-flex-grid”。

希望这会有所帮助!