Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebPack support #618

Closed
jihocech opened this issue May 9, 2015 · 7 comments
Closed

WebPack support #618

jihocech opened this issue May 9, 2015 · 7 comments
Labels
design: material This is about Material Design, please involve a visual or UX designer in the process package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5.

Comments

@jihocech
Copy link

jihocech commented May 9, 2015

Could you provide an example or a documentation how to use it with the WebPack please?
I have tried it with common WebPack config, but it doesn't work.

@owais
Copy link

owais commented May 10, 2015

Some more details like output log would helps other help you much better.

Main thing you might be missing is the JSX loader and node_modules support.

var webpack = require('webpack');
var BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    context: __dirname,
    entry: "./main.js",
    output: {
        path: "[bundle_dir]",
        filename: "[name]-[hash].js"
    },

    plugins: [
      new BowerWebpackPlugin(),
      new webpack.ProvidePlugin({
        $:      "jquery",
        jQuery: "jquery",
        hammerjs: "hammerjs",
        react: "React"
      })
    ],

    module: {
      loaders: [
          { test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' },
          { test: /\.css$/, loader: "style-loader!css-loader" },
          { test: /\.scss$/, loader: "style!css!sass!" },
          { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
          { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&minetype=application/font-woff" },
          { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,  loader: "url?limit=10000&minetype=application/font-woff" },
          { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=application/octet-stream" },
          { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
          { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=image/svg+xml" }
      ],
    },

    resolve: {
      modulesDirectories: ['web_modules', 'node_modules', 'bower_components'],
      extensions: ['', '.js', '.jsx']
    },
}

This is my webpack config.

main.js looks like this,

require('./js/app.jsx');

and js/app.jsx looks like this,

var React = require('react');
var injectTapEventPlugin = require("react-tap-event-plugin");
var mui = require('material-ui');

var RaisedButton = mui.RaisedButton;

injectTapEventPlugin();


var Index = React.createClass({
  render: function(){
    return <div>
          <RaisedButton label="My Material UI button" primary={true} />
    </div>
  }
});


React.render(
  <Index />,
  document.getElementById('main-app')
);

@owais
Copy link

owais commented May 10, 2015

Forgot about less files. You can import an app.less in main.js just liek app.jsx

require('./less/app.less');

and then in app.less you can have

@import "~material-ui/src/less/scaffolding.less";
@import "material-variables.less";
@import "~material-ui/src/less/components.less";

The ~ means you want to load the file from modules instead of a relative path.

@wizawu
Copy link
Contributor

wizawu commented May 11, 2015

@import "~material-ui/src/less/scaffolding.less";
@import "material-variables.less";
@import "~material-ui/src/less/components.less";

is no longer in master branch.

@owais
Copy link

owais commented May 11, 2015

@wizawu yes, looks like styles have moved to react components themselves. Interesting.

@owais
Copy link

owais commented May 11, 2015

So if you are using master, you'll probably not need to import those less files.

@hai-cea
Copy link
Member

hai-cea commented May 27, 2015

Looks like this question has been addressed.

@hai-cea hai-cea closed this as completed May 27, 2015
@seasonli
Copy link

It seems that failed complied by babel-loader? Is that not been supported yet?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design: material This is about Material Design, please involve a visual or UX designer in the process package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5.
Projects
None yet
Development

No branches or pull requests

6 participants