Stylesheet from (npm) linked package not loaded correctly

[weitjong]

OS

Tested on both Windows 7 and Linux (Fedora 24)

Version

$ ng --version
angular-cli: 1.0.0-beta.22-1
node: 4.6.1
os: linux x64

The app was created using CLI.

Repro steps

1. Install a package containing a stylesheet (say bootstrap-sass, actually any package will do) globally via npm.
2. git clone https://github.com/twbs/bootstrap-sass.git into a working directory, cd to that working directory and perform npm link command.
3. ng new project in another separate directory, cd to the newly create project directory and perform npm link bootstrap-sass. This will create a bootstrap-sass symlink in node_modules pointing to the local git repository.
4. Modify angular-cli.json to reference the stylesheet in the linked package.

      "styles": [
        "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss",
        "styles.scss"
      ],

5. ng serve and observe that styles from bootstrap is not exported correctly in the index page.
6. ng build and observe that the generated styles.bundle.js does not do "exports.push()".

The log given by the failure

There was no error log, webpack declared the "bundle is now valid".

Mention any other details that might be useful

Using normal npm install approach does not have this issue. i.e. after npm unlink bootstrap-sass && npm install bootstrap-sass then all is fine.

Use case: I have a forked gentelella repository locally to fix some of the issues I found, so I cannot just simply npm install it in my project. Using npm link approach as I outlined above should work. It seems angular-cli (or webpack, I am not sure) is being confused by symlink. As a temporary workaround, I replace the stylesheet reference in the angular-cli.json with an absolute path to the stylesheet file in the local git repo.

[clydin]

For a cleaner workaround, you can npm install using the path to the forked package.

[weitjong]

For a cleaner workaround, you can npm install using the path to the forked package.

@clydin Thanks for your reply. The npm install will just install a snapshot of the local repo. This would force me to redo the install each time I make changes in my local repo. With symlink all changes are automatically reflected in my project using the linked package.

I also do not want to just check-in the stylesheet in question into my own project repo and use the @import in the styles.scss as the workaround (although it would also work) because: 1) I don't want to break the linkage with upstream so that I could still easily merge upstream changes; 2) I can also easily contribute back my fixes back to upstream.

[weitjong]

Using @import "../node_modules/gentelella/src/scss/custom"; in the styles.scss as the workaround now. The sass preprocessor handles the symlink well.

[serhiisol]

CLI doesn't seem to copy anything outside of the src folder, but should be able to copy from node_modules.

To reproduce this weird issue just try to copy file one level up of src folder

[zackarychapple]

@serhiisol it can copy from outside src, in the example repo for #3542 it pulls the styles for buttons but the column styles are not applying.

[serhiisol]

@zackarychapple where is the copy process specified in this repo? angular cli json doesn't have it in example you've provided : https://github.com/zackarychapple/bootstrap-ng2/blob/master/angular-cli.json

[zackarychapple]

@serhiisol I tried @import "../node_modules/bootstrap/scss/bootstrap-flex"; in https://github.com/zackarychapple/bootstrap-ng2/blob/master/src/styles.scss as well as in the angular-cli.json and neither option worked.

[serhiisol]

@zackarychapple but your last comment is opposite to the one before :)

[zackarychapple]

@serhiisol you're right the code I committed was after I removed the line that copied from src.