Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

not able to have styles on the component

See original GitHub issue

I am unable to make the packaged work, and I am looking for your help please.

this is how its look when using the demo code

and when using the native. can you please help me understand what am I doing wrong?

this is my webpack configuration:

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }, {
      test: /\.css$/,
      include: [ path.resolve(__dirname, "public") ],
      use: ExtractTextPlugin.extract({
          use: [
              {
                  loader: "css-loader",
                  options: {
                      modules: false,
                      importLoaders: true
                  }
              }
          ]
      })
    }, {
      test: /\.css$/,
      exclude: /public/,
      use: ExtractTextPlugin.extract({
          use: [
              {
                  loader: "css-loader",
                  options: {
                      modules: true,
                      importLoaders: true,
                      localIdentName: "[name]__[local]___[hash:base64:5]"
                  }
              }
          ]
      })
    }
  ]
},

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

4reactions

catamphetaminecommented, May 30, 2018

can u please help me understand the problem?

No. Find a Webpack mentor or learn Webpack yourself.

0reactions

KingAMScommented, May 30, 2018

That fixed it, can u please help me understand the problem? I really appreciate the help

my webpack:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const applicationConfig = require('./config/admin.js');
const applicationText = require('./locales/admin/' + applicationConfig.language + '.json');

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'src/admin/client/index.js'),
    vendor: [
      'react',
      'react-dom',
      'react-redux',
      'redux-thunk',
      'react-router-dom',
      'react-dropzone',
      'redux',
      'redux-form',
      'redux-form-material-ui',
      'material-ui'
    ]
  },

  output: {
    publicPath: '/',
    path: path.resolve(__dirname, 'public'),
    filename: 'admin-assets/js/[name]-[chunkhash].js',
    chunkFilename: 'admin-assets/js/[name]-[chunkhash].js'
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          name: 'vendor',
          test: 'vendor',
          enforce: true
        },
      }
    }
  },

  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src/admin/client'),
      routes: path.resolve(__dirname, 'src/admin/client/routes'),
      modules: path.resolve(__dirname, 'src/admin/client/modules'),
      lib: path.resolve(__dirname, 'src/admin/client/lib')
    }
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }, {
        test: /\.css$/,
        include: [ path.resolve(__dirname, "public") ],
        use: ExtractTextPlugin.extract({
            use: [
                {
                    loader: "css-loader",
                    options: {
                        modules: false,
                        importLoaders: true
                    }
                }
            ]
        })
      }, {
        test: /\.css$/,
        exclude: /public/,
        use: ExtractTextPlugin.extract({
            use: [
                {
                    loader: "css-loader",
                    options: {
                        modules: true,
                        importLoaders: true,
                        localIdentName: "[name]__[local]___[hash:base64:5]"
                    }
                }
            ]
        })
      }
    ]
  },

  plugins: [
    new webpack.DefinePlugin({ APPLICATION_CONFIG: JSON.stringify(applicationConfig) }),
    new webpack.DefinePlugin({ APPLICATION_TEXT: JSON.stringify(applicationText) }),
    new ExtractTextPlugin("admin-assets/css/bundle-[contenthash].css"),
    new HtmlWebpackPlugin({
      template: 'src/admin/client/index.html',
      language: applicationConfig.language,
      inject: 'body',
      filename: 'admin/index.html'
    }),
    new webpack.BannerPlugin({
      banner: `Created: ${new Date().toUTCString()}`,
      raw: false,
      entryOnly: false
    })
  ]
};