Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

Css module import of local file doesn't work #1098

Closed
1 task
Fatme opened this issue Nov 19, 2019 · 0 comments
Closed
1 task

Css module import of local file doesn't work #1098

Fatme opened this issue Nov 19, 2019 · 0 comments
Assignees
Labels
Milestone

Comments

@Fatme
Copy link
Contributor

Fatme commented Nov 19, 2019

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: 6.2.x

  • Cross-platform modules: 6.2.x

  • Android Runtime: 6.2.x

  • iOS Runtime: 6.2.x

  • Plugin(s):

  • Node.js:

  • Please, attach your package.json and webpack.config.js as these configurations are usually critical for investigating issues with webpack

Describe the bug
The following syntax doesn't work anymore after updating to NativeScript 6.2:

@import 'common.css';

To Reproduce

  1. tns create myApp --ng
  2. cd myApp && cd src && touch common.css
  3. Open app.css and add @import 'common.css';
  4. tns run ios
    The following error will be shown:
ERROR in ./app.css
Module not found: Error: Can't resolve 'common.css' in '/Users/<myuser>/Work/nativescript-cli/scratch/myApp/src'
 @ ./app.css 3:53-141
 @ ../node_modules/nativescript-dev-webpack/load-application-css-angular.js
 @ ./main.ts
Executing webpack failed with exit code 2.

Expected behavior

The described syntax is working with NativeScript 6.1 and it should work with NativeScript 6.2. as well.

Additional context

Workaround:
The import should be changed with relative path e.g. @import './common.css'

It seems that after changing css-loader with css2json-loader, module imports of .css file doesn't work anymore and only relative imports are supported.

The issue is not reproduced with .scss files.

@Fatme Fatme added the bug label Nov 19, 2019
@rosen-vladimirov rosen-vladimirov added this to the 1.4.0 milestone Nov 20, 2019
Fatme added a commit that referenced this issue Nov 21, 2019
There is an issue when importing local css file as module as the `css2json-loader` handles it as a module instead of a local file. So, the webpack throws an error that it is not able to find the module. This PR fixes this issue as changing the method used to get the correct file uri with the method used by `css-loader` itself - https://github.com/webpack-contrib/css-loader/blob/967fb66da2545f04055eb0900a69f86e484dd842/src/utils.js#L220.

Rel to: #1098
Fatme added a commit that referenced this issue Nov 22, 2019
After changing `css-loader` with `css2json-loader`, we have an issue that module imports of local css files doesn't work anymore - #1098. As it turns out that we don't have applications that test this scenario, we decided to add such an import in demo JavaScript application.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants