archfirst / angular2-seed-sass Goto Github PK

When run in watch mode with npm start, any changes in scss files have no effect. The watcher detects the change, recompiles and reloads browser, but css changes are not applied. Changes to any other files (*.ts) are seen immediately after reload.

However, when running npm run build.prod to make the production build, changes are properly compiled and seen.

Failed at ... --color

npm ERR! Failed at the [email protected] start script 'gulp serve.dev --color'.

Steps to Reproduce

I just pulled down the repo and get this error.
I see --color in many of the angular seed projects but don't know how to chase down what it is.

I can attach the full stack trace if wanted...

Are there any special requirements for this kind of upgrade? Is the problem related to npm package (angular is now distributed as @angular)?

IMPORTANT: This repository's issues are reserved for feature requests and bug reports. Do not submit support requests here.

Steps to reproduce and a minimal demo of the problem

What steps should we try in your demo to see the problem?

Current behavior
the production server from the original seed project was removed

Expected/desired behavior
searching for a recommended way to run the production build

Other information
i assume there is a reason that the production server was removed from this fork, just wondering if there is a suggested method of running the production build now?

nice work but would be great rebuild with latest dependencies

Guys I started using this repo yesterday and the first thing I tried to do was import foundation.

@import 'foundation';

then of course I got:

Error: src/assets/main.scss
Error: File to import not found or unreadable: foundation
       Parent style sheet: stdin
        on line 1 of stdin
>> @import 'foundation';

I went to the config looking for the SASS pipe, and found it inside tools/tasks/seed/process.scss.ts.

To make my import work I just had to add a well know variable called includePaths to the plugins.sass call, but here lies the problem:

Wouldn't it be better to have a config variable called sass_include_paths to have all external libraries you need to compile sass and import it inside the config file ?

doesn't seem right changing inside the seed tasks folder, this sohuld be added only to the project folder or project config

what do you guys think? is there any other way to do it?

This is a feature request to replace scss-lint by sass-lint. The biggest advantage of using sass-lint is that it is a node-only solution. As far as I understand, no ruby installation and no gems are required.

This is a massive advantage when considering heterogeneous development (including the CI server) environments where installing new software is tedious.

The SCSS process appears to drop out when implementing the changes in this fork, in the up-to-date Seed repo

tools/tasks/seed/sass-lint.ts:14
Why there's a rule to specifically exclude the assets folder that is including main.scss and others (and in my opinion the best place to add mixin, patterns etc. folders).
I can easily comment out that rule, but I don't get the point of it being there in the first place…

EDIT: Actually it may be the other function trying to do that, "lintExternalCss", but it's not working as the assets/main.css is not being linted at all.

I have made following file:

src/shared/components/loader/loader.component.scss

Somehow these css rules do not apply to main css. Is this a task/compile issue?
How could we solve this? Thank you in advance.

Have you been able to solve the problem that seems to have been left by https://github.com/mgechev/angular2-seed/wiki/Add-custom-Gulp-task in that the final css is in the src directory and not in dist?

All style sheets that are not part of components need to be concatenated and output to dist/prod/css/all.css. See the build process in the original angular2-seed project. That process also adds the following lines to index.html which picks up the concatenated css file:

  <!-- inject:css -->
  <link rel="stylesheet" href="/css/all.css?1459289107856">
  <!-- endinject -->

I sugest to implement compass support for this project. Many peopole who use sass would like to use their compass mixins and functions too.

In this moment when i try to use @import 'compass' it can not resolve.

I think to do this we need config.rb but i have no idea how to properly configurate it in this files structure.

In my opinion that gulp-compass should be implemented in gulp's task but i simply don't know when and how to do this.

Any idea how to overcome this right now ?

I want to start from scratch, when I try to delete home or about folder from src they are reproduced again? is this a feature or a bug and how to stop them from reproduced every time I remove them?

IMPORTANT: This repository's issues are reserved for feature requests and bug reports. Do not submit support requests here.

Steps to reproduce and a minimal demo of the problem
npm test

What steps should we try in your demo to see the problem?

Current behavior
End up with an error like:
WARN [web-server]: 404: /base/dist/dev/home/components/home.component.js

Expected/desired behavior

Other information
If you change the Component styleURLs from:
styleUrls: ['./home.component.css']

to:
styleUrls: ['./home.component.scss']

The tests pass.

Hi.
What is the task where you prepare the injected styles? Font-Awesome for example.... It not works in prod env after update the seed.

Description

I want to use the variables.scss to hold global variables, but I am not allowed to reference them in component.scss files because the files aren't connected via import.

Recommendations for a common scss file, not just "styles".

Description
Immediately after cloning the repository and executing npm install && npm run build.prod the build throws the following error:

Unhandled rejection Error on fetch for dist\tmp\main.js at file:///d:/Working/test/angular2-seed-sass/node_modules/dist\tmp\main.js
Error: ENOENT: no such file or directory, open 'd:\Working\test\angular2-seed-sass\node_modules\dist\tmp\main.js'
at Error (native)

It looks like a similar issue has been fixed in the main angular 2 seed repository.

Steps to Reproduce

1. Clone repository
2. cd angular2-seed-sass
3. npm install && npm run build.prod

Current environment set up...
Windows 10
node v. 4.4.4
npm v. 3.8.1
tsc v. 1.7.5