File to import not found or unreadable: active_material/values/*.

[Nur-Alam39]

I have added in app/javacsript/packs folder: active_admin.js and active_admin.scss file and also added - @import "active_material/src/stylesheets/active_material.scss";andimport "active_material" respectively.

While running bin/webpack-dev-server command in the terminal for compiling, the following error occurred-

ERROR in ./app/javascript/packs/active_admin.scss (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src??ref--9-2!./node_modules/sass-loader/dist/cjs.js??ref--9-3!./app/javascript/packs/active_admin.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "active_material/values/*";
^
      File to import not found or unreadable: active_material/values/*.
      in /home/nur-alam/NurAlam/Development/Projects/RubyonRails/welcome_to_australia/node_modules/active_material/src/stylesheets/active_material.scss (line 15, column 1)
Error: 
@import "active_material/values/*";
^
      File to import not found or unreadable: active_material/values/*.
      in /home/nur-alam/NurAlam/Development/Projects/RubyonRails/welcome_to_australia/node_modules/active_material/src/stylesheets/active_material.scss (line 15, column 1)
    at options.error (/home/nur-alam/NurAlam/Development/Projects/RubyonRails/welcome_to_australia/node_modules/node-sass/lib/index.js:291:26)
ℹ ｢wdm｣: Failed to compile.

Note: The is a Rails 6 application running with webpacker

[paul]

We also have this issue when trying to upgrade to the npm module version with webpacker. Similar error, but with a different css node_module:

ERROR in ./app/javascript/packs/active_admin.scss
Module build failed (from /home/rando/Code/textus/tesseract/master/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from /home/rando/Code/textus/tesseract/master/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
15 │ @import "active_material/values/*";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  ../../master/node_modules/active_material/src/stylesheets/active_material.scss 15:9  @import
  app/javascript/packs/active_admin.scss 1:9                                           root stylesheet

Perhaps there's another scss compiler to use that supports wildcards in the @import statements that needs to be used?

[kfriend]

@Nur-Alam39 @paul I submitted a PR to resolve this https://github.com/dkniffin/active_material/pull/85. I don't know when this will be reviewed, but a workaround could be taking the changes from this PR, putting them in their own file, and import that instead of from the active_material entry file. You may need to adjust the paths though, I haven't actually tested this yet.

[dkniffin]

PR merged and released in 2.0.1