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

控制台中没有错误，基础CSS显示在DOM中。

Answer 1

尝试更改app.scss文件以包含基础网格，如下所示：

＆＃13;

@import "base/variables";

//Foundation
@import "base/foundation-settings";
@import "foundation";
@include foundation-everything;

// Not included in foundation-everything:
@include foundation-grid;

＆＃13;

来自Foundation 6 SASS docs：

我们的入门项目包括完整的导入列表，使其变得简单   评论你不需要的组件。完整列表也是   包括在下面。 @import＆＃39;基金会＆＃39;;

@include foundation-global-styles;

@include foundation-xy-grid-classes;

// @ include foundation-grid;

// @ include foundation-flex-grid;

@include foundation-flex-classes;

...

我出于同样的原因在桌子上敲打我的头，与你几乎一样的设置，碰巧偶然发现了技术文档中的这个小小的暗示。无论出于何种原因，＆＃34; foundation-grid＆＃34;和＆＃34; foundation-flex-grid＆＃34;需要进口除了基础 - 一切＆＃34;如果你也想要它们。

我希望这有帮助！

Answer 2

对我来说，要使基础工作，我必须把这个

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

在根组件中。

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

set up foundation

在React

2 个答案: