search

tutorbookapp / old-tutorbook

Source available code for Tutorbook's progressive web app (PWA).
https://tutorbook.app
Other
13 stars 10 forks source link

fix: debug Sass import file abbreviations #52

Open nicholaschiang opened 4 years ago

nicholaschiang commented 4 years ago

fix: debug Sass import file abbreviations

This works (in src/app/packages/app/styles/login.scss):

@use "@material/button";

But this doesn't (same file):

@use "@material/ripple";

Current workaround:

@use "@material/ripple/_index.scss" as ripple;

This has something to do with the way that sass-loader and webpack are resolving modules because it should work.

nicholaschiang commented 4 years ago

Problem here has to do with the way that sass-loader resolves imports:

Webpack provides an advanced mechanism to resolve files.

The sass-loader uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell Webpack that this is not a relative import:

Webpack will then resolve imports using the main fields within the directories package.json file (which usually does not point to the _index.scss file we want to import):

If the path points to a folder, then the following steps are taken to find the right file with the right extension:

  • If the folder contains a package.json file, then fields specified in resolve.mainFields configuration option are looked up in order, and the first such field in package.json determines the file path.
  • If there is no package.json or if the resolve.mainFields do not return a valid path, file names specified in the resolve.mainFiles configuration option are looked for in order, to see if a matching filename exists in the imported/required directory.
  • The file extension is then resolved in a similar way using the resolve.extensions option.

We need to resolve SCSS imports from the node_modules to grab _index.scss files automatically.

nicholaschiang commented 4 years ago

On a related note, I'm adding some SCSS @use statements to src/site/packages/error-msg/index.scss and it can't seem to be able to resolve the module imports to the modules in src/site/packages/error-msg/node_modulex automatically:

    ERROR in ./packages/error-msg/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./packages/error-msg/index.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Can't find stylesheet to import.
       ╷
    25 │ @use "@material/animation/functions" as functions2;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
       ╵
      packages/error-msg/node_modules/@material/ripple/_mixins.scss 25:1     @use
      packages/error-msg/node_modules/@material/ripple/mdc-ripple.scss 23:1  @use
      /home/nchiang/repos/tutorbook/src/site/packages/error-msg/index.scss 2:1                                                              root stylesheet
     @ ./packages/error-msg/index.scss 2:21-141
     @ ./packages/error-msg/index.js
     @ ./packages/site/index.js

Current workaround is to just add that absolute path (of src/site/packages/error-msg/node_modules to the sass-loader sassOptions includePaths field in our root src/site/webpack.config.js similar to what we're doing in src/app/webpack.config.js).

mvortizr commented 4 years ago

https://github.com/material-components/material-components-web/issues/351 I tried everything in that issue and nothing works ^.