CSS output is broken /******/

[lancemonotone]

Bug report

What is the current behavior? I am attempting to build a CSS file from a SCSS file. Seemingly at random, the output CSS file contains the correct css styles, but they are followed by a bunch of lines beginning with /**/ and what appears to be internal webpack code. Sometimes I'm able to successfully complete a build by deleting comments in the original SCSS files, but then I build again - without changing anything - and the output breaks again.

Truncated example of contents of output CSS file:

.some-style{foo: bar;}re__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }

If the current behavior is a bug, please provide the steps to reproduce.

I've included a gist of my files. If this isn't helpful, please let me know and I'll paste the output into this bug report.

https://gist.github.com/lancemonotone/cb1f98e9545875b30592d4d53e9f7c97

What is the expected behavior? A correctly-parsed, minified, comment-stripped CSS file should be output.

Other relevant information: webpack version: 4.31.0
Node.js version: v8.9.1 Operating System: Windows 10 Additional tools:

[sokra]

Such problems occur when two file contents are written to the same file in parallel. Check your config and don't put .css output files where .js output files are expected.

[sokra]

Please submit support requests and questions to StackOverflow using the tag [webpack]. StackOverflow is better suited for this kind of support. The issue tracker is for bug reports and feature discussions. See also our CONTRIBUTING guidelines.

[lancemonotone]

With respect, this appeared to be a bug. Sometimes it happens, sometimes it doesn't. I'd also appreciate it if you could give me a bit of guidance as to your proposed solution. What about my config is outputting css files and js files to the same location? There are no js files in my config.

module.exports = function () {
  return exportModules( [css] );
};

// Config for SCSS files
const css = {
  entry: {
    'frontend.css': `${__dirname}/src/scss/frontend.scss`
  },
  output: {
    path: `${__dirname}/css`,
    filename: '[name]'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        // module chain executes from last to first
        use: [
          {
            loader: 'file-loader',
            options: { name: '[name].css', outputPath: '../css/' }
          },
          { loader: "remove-comments-loader" },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          { loader: 'resolve-url-loader' },
          { loader: 'sass-loader' },
        ]
      },
    ]
  }
};

/**
 * Merge filetype configs with shared config and return them as an array of objects.
 * @param objs
 * @return {Array}
 */
const exportModules = ( objs ) => {
  const objArr = [];
  for ( let i = 0; i < objs.length; i++ ) {
    objArr.push( {
      ...config(),
      ...objs[i]
    } );
  }
  return objArr;
};

// Shared config options
const config = function () {
  return {
    mode: 'production',
    stats: {
      colors: true,
      children: false
    }
  }
}; 

[alexander-akait]

Problem in extract-loader or remove-comments-loader

[lancemonotone]

Problem in extract-loader or remove-comments-loader

Thanks, would you care to elaborate?

[alexander-akait]

@lancemonotone some of loaders above return js context instead of css, try to disable step by step loaders to catch problem

[lancemonotone]

@lancemonotone some of loaders above return js context instead of css, try to disable step by step loaders to catch problem

Thank you for your reply. I did disable both loaders in turn. Removing remove-comments-loader has no effect on the error, and removing extract-loader gives me only webpack code, with no style information at all:

exports = module.exports = require("../../../../../../../../node_modules/css-loader/dist/runtime/api.js")(false);
// Imports
exports.push([module.id, "@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i);", ""]);
exports.push([module.id, "@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i);", ""]);

// Module
exports.push([module.id, "/**\r\n * This file should contain styles that will be applied to\r\n * all module instances within a builder layout.\r\n */\n\n/******************************************************************\r\nSite Name:\r\nAuthor:\r\n\r\nStylesheet: Typography\r\n\r\nNeed to import a font or set of icons for your site? Drop them in\r\nhere or just use this to establish your typographical grid. Or not.\r\nDo whatever you want to...GOSH!\r\n\r\nHelpful Articles:\r\nhttp://trentwalton.com/2012/06/19/fluid-type/\r\nhttp://ia.net/blog/responsive-typography-the-basics/\r\nhttp://alistapart.com/column/responsive-typography-is-a-physical-discipline\r\n\r\n******************************************************************/\n\n/*********************\r\nFONT FACE (IN YOUR FACE)\r\n*********************/\n\n/*\r\n  To embed your own fonts, use this syntax\r\n  and place your fonts inside the\r\n  lib/fonts folder. For more information\r\n  on embedding fonts, go to:\r\n  http://www.fontsquirrel.com/\r\n  Be sure to remove the comment brackets.\r\n*/\n\n/*\r\n  @font-face {\r\n      font-family: 'Font Name';\r\n      src: url('lib/fonts/font-name.eot');\r\n      src: url('lib/fonts/font-name.eot?#iefix') format('embedded-opentype'),\r\n             url('lib/fonts/font-name.woff') format('woff'),\r\n             url('lib/fonts/font-name.ttf') format('truetype'),\r\n             url('lib/fonts/font-name.svg#font-name') format('svg');\r\n      font-weight: normal;\r\n      font-style: normal;\r\n  }\r\n*/\n\n/*\r\nThe following is based of Typebase:\r\nhttps://github.com/devinhunt/typebase.css\r\nI've edited it a bit, but it's a nice starting point.\r\n*/\n\n/*********************\r\nBREAKPOINT VARIABLES\r\n*********************/\n\n/******************************************************************\r\nSite Name:\r\nAuthor:\r\n\r\nStylesheet: Variables\r\n\r\nHere is where we declare all our variables like colors, fonts,\r\nbase values, and defaults. We want to make sure this file ONLY\r\ncontains variables that way our files don't get all messy.\r\nNo one likes a mess.\r\n\r\n*****************************************************************/\n\n/*********************\r\nCOLORS\r\nNeed help w/ choosing your colors? Try this site out:\r\nhttp://0to255.com/\r\n*********************/\n\n/*\r\nHere's a great tutorial on how to\r\nuse color variables properly:\r\nhttp://sachagreif.com/sass-color-variables/\r\n*/\n\n/*********************\r\n    Type\r\n    *********************/\n\nbody .post-content .fl-module-content blockquote {\n  /*padding: 0 20px;\r\n    p {\r\n      font-family: $monospace;\r\n      font-style: normal;\r\n      background-color: transparent;\r\n      padding: 0;\r\n      font-weight: 500;\r\n      font-size: 18px;\r\n    }\r\n    footer {\r\n      padding: 0;\r\n      font-size: 14px;\r\n      font-style: normal;\r\n      font-weight: 500;\r\n      cite {\r\n        font-size: 14px;\r\n        font-style: normal;\r\n        font-weight: 500;\r\n        margin-left: 10px;\r\n        &:before {\r\n          content: \"\";\r\n        }\r\n      }\r\n    }*/\n}", ""]);

function(module, exports, __webpack_require__) {

module.exports = __webpack_require__.p + "../css/frontend.css";

/***/ })
/******/ ]);