基礎沒有在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中。

來源

2017-07-15 wildlifehexagon

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

我最終切換到此項目的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;

...

，我打我的頭在桌子上出於同樣的原因，幾乎相同的設置，你，和發生在技術文檔在這個小提示絆倒。無論出於何種原因，除了「基礎一切」之外，還需要導入「基礎網格」和「基礎柔性網格」。

我希望這有助於！

來源

2017-09-30 05:54:50

對我來說，做基礎的工作，我必須把這個

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

根組件。

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

set up foundation

來源

2017-12-31 17:42:18 stevemu

基礎沒有在React中正確格式化

回答

相關問題