Semantic UIビルドをWebpackに追加

Question

Webpackで構築されているプロジェクトでSemantic UIとReactを使用しています。ここで

は私のWebPACKのコードです：

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    devtool: '#source-map', 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

（私は私のプリセットを保持している.babelrcファイルを持っている）

私はテーマを使用していますので、私は私は変更を加えるたびに再構築する必要が.variablesファイル。 Webpackファイルにgulpコマンドを追加して、私のためにこれを行うにはどうすればいいですか？ここで

Answer 1

は、例えばsemantic.jsonです：

{ 
    "base": "semantic/", 
    "paths": { 
    "source": { 
     "config": "src/theme.config", 
     "definitions": "src/definitions/", 
     "site": "src/site/", 
     "themes": "src/themes/" 
    }, 
    "output": { 
     "packaged": "dist/", 
     "uncompressed": "dist/components/", 
     "compressed": "dist/components/", 
     "themes": "dist/themes/" 
    }, 
    "clean": "dist/" 
    }, 
    "permission": false, 
    "autoInstall": false, 
    "rtl": false, 
    "version": "2.2.2" 
} 

はちょうど...あなたのclient.js簡単なインポートで、その後のWebPACK用としてimport './semantic';ようsemantic.jsを使用すると、たとえばrequire('../semantic/dist/components/transition.js'); ためsemanticから必要なものは何でもsrcフォルダとインポートでsemantic.jsファイルを作成します。 .cssと.lessローダーをお持ちであることをご確認ください：

{ 
    test: /\.less$/, 
    loader: 'style!css?importLoaders=2&sourceMap&localIdentName=[local]__[hash:base64:5]!less-loader' 
    }, 
    { test: /\.css/, loader: 'style!css?importLoaders=2&sourceMap&localIdentName=[local]__[hash:base64:5]' },