CODEWITHSUNDEEP
reactjsbuildwebpacksemantic-uiwebpack-dev-server
user2465134
user2465134

Reputation: 9763

Add Semantic UI Build to Webpack

I'm using Semantic UI with React in a project which is being built with Webpack.

Here is my Webpack code:

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: './'
  }
};

(I have a .babelrc file that is holding my presets)

Because I am using theming I have to rebuild every time I make a change in a .variables file. How do I add a gulp command into my Webpack file to do this for me?

Upvotes: 1

Views: 2030

Answers (1)

Ilanus
Ilanus

Reputation: 6928

Here's example 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"
}

Create a semantic.js file in the src folder and import whatever you need from semantic for example require('../semantic/dist/components/transition.js'); then in your client.js simple import semantic.js like import './semantic'; as for webpack.. just make sure you have .css and .less loaders:

  {
    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]' },

Upvotes: 1

Related Questions