React 中的 Foundation 格式不正确答案

【问题标题】：Foundation not being formatted correctly in ReactReact 中的 Foundation 格式不正确
【发布时间】：2017-12-20 17:56:56
【问题描述】：

我正在尝试在 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 中。

【问题讨论】：

找到修复方法了吗？你是怎么解决的？
我最终为这个项目切换到 React Flexbox Grid。
我使用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'); 解决了我的问题。感谢您的回复。

标签： reactjs sass zurb-foundation

【解决方案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：

我们的入门项目包含完整的导入列表，让您轻松上手注释掉不需要的组件。一个完整的列表也是包括在下面。 @import '基础';

@include 基础全局样式；

@include 基础-xy-grid-classes;

//@include 基础网格；

//@include Foundation-flex-grid;

@include 基础弹性类；

...

出于同样的原因，我在桌子上敲了敲头，设置几乎和你一样，碰巧在技术文档中偶然发现了这个小提示。无论出于何种原因，如果你想要它们，除了“foundation-everything”之外，还需要导入“foundation-grid”和“foundation-flex-grid”。

我希望这会有所帮助！

【讨论】：

【解决方案2】：

对我来说，为了让基础工作，我必须把这个

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

在根组件中。

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

set up foundation

【讨论】：