importing css dynamically also unnecessarily applies scss configurations for it and throws scss errors for scss files which just stays inside package.

[shashank-brightness]

• Laravel Mix Version: 6.0.49 (npm list --depth=0)
• Node Version (node -v): 14.18.2
• NPM Version (npm -v): 6.14.15
• OS: Ubuntu wsl

Description:

I am not sure how exactly i would describe this but i am trying to import css file from my package and not only that but i have already configured css-lodaer for that with exportType to set as css-style-sheet. and i have already isolated laravel-mix default configuration by adding this script before mix.

mix.override((config) => {
  config.module.rules.forEach((rule) => {
    const isRuleExcluded =  (rule.test.toString() === '/\\.p?css$/') 
          || (rule.test.toString() === "/(\\.(woff2?|ttf|eot|otf)$|font.*\\.svg$)/") 
          || (rule.test.toString() === "/(\\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\\.svg$)/")
          || (rule.test.toString() === "/\\.html$/");

    if(isRuleExcluded) {
      //console.log(rule)
      if(rule.exclude) {
        rule.exclude.push(/mypackage/);
      } else {
        rule.exclude = [/mypackage/]
      }
    }
  });
});
   

this way mix configuration should not be applied when i import css for my css configuration. this is my css configuration which is also isolated to specific folder only named mypackage

 {
              test: /\.css$/i,
              use: [
                {
                  loader: path.resolve(__dirname, 'node_modules/mypackage/node_modules/css-loader'),
                  options: {
                    exportType: "css-style-sheet"
                  } 
                }
              ],
              include: [/mypackage/]
            },

i even used mypackage to be able to use specific css-loader present in its own node_modules. now when i import css dynamically and expect css-style-sheet object to be present, it does not happen instead mix gives us scss error even for css files.

const urls = ['../output/css/main.css', '../output/css/custom.css'];
export default function(shadowRoot) {
    if(shadowRoot) {
        urls.forEach(function(url) {
            
            import(`${url}`).then(cssmodule => {
                //code which expects that `cssmodule.default` should be of CssStyleSheet object
                // which needs to be applied to shadow dom but this fails due to fact that dynamic import
                // gives unwanted scss files error. totally strange and how????
            })
        })
    }
}

i am not totally sure how it got to raise this error even thought the fact that i have not included scss anywhere. Scss is something i was using in mypackage level to compile to css but now as they are already compiled i am importing the compiled css files.

however if i use static string directly in import function then it works as expected which i am not sure why. here correct rules are logged as CssStyleSheet object in console which i exactly need.

 import('../output/css/main.css').then(mainCssModule => {
            console.log(mainCssModule.default)
        })
        import('../output/css/custom.css').then(customCssModule => {
            console.log(customCssModule.default)
        })

what could be issue with variable as an import string? it is not extracting css chunk separately if i use variable or computed expression in place of static string!!

I am kind of overwhelmed due to isolating everything just to make something work as it should. I don;t totally need scss configuration from laravel mix and i completely want to override so anything from default mix is not applied to my own webpack config and mine should not be applied to those default files as well. Afterall, why someone should get into something already existing stuff/configuration just to turn it off and compiles without problem?

When i inspected mix.dump() it gave this scss config where under oneOf config resourceQuery was set to /module/ and i am 99% sure due to this thing it gives scss errors but i am not figuring out how it reaches to scss files in my node package which is mypackage i have not even mentioned those files anywhere but just resulting css only.

My node package has source scss files in src directory but those files are already compiled and kept in output directory just for managing css and should not be included/combined/taken into account when i import css only. i have nothing to do with scss now.
i have got rid of error by removing scss folder from package but now dynamic imports from webpack are not generating separate chunk for css to isolate it on different files.

{
    "test": "/\\.scss$/",
    "exclude": [],
    "oneOf": [
      {
        "resourceQuery": "/module/",
        "use": [
          {
            "loader": "/home/user/project/node_modules/style-loader/dist/cjs.js"
          },
          {
            "loader": "/home/user/project/node_modules/css-loader/dist/cjs.js",
            "options": {
              "modules": {
                "mode": "local",
                "localIdentName": "[hash:base64]"
              }
            }
          },
          {
            "loader": "/home/user/project/node_modules/postcss-loader/dist/cjs.js",
            "options": {
              "postcssOptions": {
                "plugins": [
                  {
                    "postcssPlugin": "autoprefixer"
                  }
                ],
                "hideNothingWarning": true
              }
            }
          },
          {
            "loader": "/home/user/project/node_modules/sass-loader/dist/cjs.js",
            "options": {
              "sassOptions": {
                "precision": 8,
                "outputStyle": "expanded"
              }
            }
          }
        ]
      },
      {
        "use": [
          {
            "loader": "/home/user/project/node_modules/style-loader/dist/cjs.js"
          },
          {
            "loader": "/home/user/project/node_modules/css-loader/dist/cjs.js",
            "options": {
              "modules": {
                "mode": "local",
                "auto": true,
                "localIdentName": "[hash:base64]"
              }
            }
          },
          {
            "loader": "/home/user/project/node_modules/postcss-loader/dist/cjs.js",
            "options": {
              "postcssOptions": {
                "plugins": [
                  {
                    "postcssPlugin": "autoprefixer"
                  }
                ],
                "hideNothingWarning": true
              }
            }
          },
          null
        ]
      }
    ]
  },

Steps To Reproduce: