tcoopman / elm-css-webpack-loader

34 stars 13 forks source link

What is the best way to troubleshoot this loader? #23

Closed ian-moore closed 4 years ago

ian-moore commented 7 years ago

I have added all the necessary npm packages, set up the config, set up the Elm port, etc etc and still no styles when running webpack. I have no idea where to look other than comparing the example config to my app line by line for the hundredth time.

SandiCat commented 6 years ago

I'm not having any luck with this, either. I cannot get the example to work (the same Uncaught ReferenceError: require is not defined error as in #6), having run npm i in both directories as suggested. Nor am I getting any CSS in my own project with the following config:

const path = require('path');
const webpack = require('webpack');

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: "./dist",
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/, /Stylesheets\.elm$/],
        use: [
          'elm-hot-loader',
          'elm-webpack-loader',
        ]
      },
      {
        test: /Stylesheets\.elm$/,
        use: [
          'style-loader',
          'css-loader',
          'elm-css-webpack-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = config; 

This is with webpack 2 for the example and webpack 3 in my project.

SandiCat commented 6 years ago

Okay, never mind. After a few hours of banging my head against the wall, I realized it works, with the above config. I guess I changed the config a bit and never tested it because I was trying to get the example working at the same time. Then I gave up, and set up webpack to bundle pure CSS, with the idea of building it with elm-css manually. Then I realized it was working without me running the elm-css command, meaning the tiny change I made was correct. The only thing I can remember doing is adding /Stylesheets\.elm$/ to the exclude. How weird.

@ian-moore See if anything in the above config helps you.