Webpack Sass Compiling Issue

I’m trying to avoid posting all my code, so I’ll try to be as thorough in my explanation of my issue, with as little code I think is needed.

We have a development side of our webpack which uses localhost:3000, and production, which pushes to the server at localhost:5000. Ignoring the JS side of things, I’ll justmention that the webpack is supposed to compile main.scss into main.css. This SCSS file imports a bunch of other files, and holds the entire “build”. But we can also add in something if we want, after the fact.

// require main build files
require('./sass/main.scss'); 
require('./js/global.js');

//components
require('./components/xxx/index.js');

That component line then require's a JS and CSS line. This all works great.

The issue arises when we enable this option which outputs x amount of CSS files (dependent on a variable being set to true, and how many are defined in an array). This generates 1 CSS and JS file per array value. Let’s say that it’s called addon For the CSS (since it’s the only thing relevant), it should compile the “main.scss” and then throw any other additional CSS that you have specified in addon.css into main.css. The JS works the same way.

Now to the problem; when I have this “addon” option enabled, AND a component is trying to be added after the fact, then the CSS for ONLY the component is not being output. The Javascript seems to be fine.
Here is what I think the chain of events are, in the code.

if (boolaen is set to true) {
  exports.wpDevConfig = require('addon-development.js');
  exports.wpProdConfig = require('addon'-production.js');
}

From there, the development JS looks like this (only relevant code in here)

const webpackconfig = merge(common, {

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ev.ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', 
              options: {
                sourceMap: false
              }
            },
            { loader: 'postcss-loader', options: {sourceMap: false}},
            { loader: 'resolve-url-loader'},
            { loader: 'sass-loader',
              options: {
                data: '@import "include";',
                sourceMap: true,
                includePaths: [
                  path.resolve(__dirname, "../src/sass/"),
                  path.resolve(__dirname, "../src/district/sass")
                ]
              }
            }
          ]
        })
      }
    ],
  },

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js',
    publicPath: '/uploaded/themes/' + ev.pkg.config.themepath
  }

});

module.exports = webpackconfig;

Addon production looks like this (shortened)

const webpackDistrictDeploy = merge(common, {

  entry: dv.entryPROD,

  devtool: 'none',

  watch: true,
  watchOptions: {
    ignored: [
      /node_modules/,
      "../src/**/**/**/**",
    ]
  },
  plugins: [

    new ev.wp.optimize.CommonsChunkPlugin({
      children: true,
    }),

    new BrowserSyncPlugin({
      host: 'localhost',
      port: 5000,
      proxy: ev.pkg.config.siteurl + '/' + ev.pkg.config.startpage,
      notify: false,
      // files: [ 
      //   ev.directory + '[name].css', 
      // ],
    }, {
        reload: true,
    }),
  ],

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ev.ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader'},
            { loader: 'postcss-loader',
              options: {
                plugins: [
                  require('cssnano')({
                    preset: [
                      'default',
                      { discardComments: { removeAll: true } }
                    ],
                  }),
                ],
                minimize: true
              },
            },
            { loader: 'resolve-url-loader'},
            { loader: 'sass-loader',
              options: {
                sourceMap: true,
                outputStyle: 'compact',
                data: '@import "include";',
                includePaths: [
                  path.resolve(__dirname, '../src/sass/')
                ]
              }
            }
          ]
        })
      }
    ],
  },

  output: {
    path: ev.directory,
    filename: '[name].js'
  }

});

module.exports = webpackDistrictDeploy;

These 2 files do a webpack merge from this file (note, this is what the merge(common is referring to: this JS file)

module.exports = {

  context: PATHS.context,


  plugins: [
    new ev.ExtractTextPlugin({ 
      filename: '[name].css', 
      allChunks: true
    }),
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ],
  },

  resolve: {
    extensions: [".js", ".json", ".jsx", ".css"],
    modules: [
      path.resolve('./src'),
      path.resolve('./node_modules')
    ],
    alias: {
      variables: path.resolve(__dirname, '../src/js/config-vars'),
      components: path.resolve(__dirname, '../src/components/')
    }
  },


};

If there are any JS errors you spot, it’s because I deleted improperly. This should hopefully be enough to go off of. My brain is frying. Thank you :slight_smile: .

Still been working on it and I still cannot fathom how the ./src/components isn’t being compiled (or removed?) if the addon option is turned on. Been working on this all day.

Is there additional information I can post that would help others help me figure this out?

I GOT IT. I’m so happy I could cry. I basically discovered that with addon set to be true, the components weren’t even set to be added. I had to rework what files got added where.

I’d have to post too much code to explain every step I took, but eventually I managed to see the logic of where it was broken.

4 Likes