Comments (5)
The task that takes care of the injected styles is build.scss.ts
. The function that you want to look at is processExternalScss()
. Currently it processes only .scss
files, but we need to extend it to process .css
files too - the only difference is that the .css
files should not pass through Sass. So it is something like this:
function processExternalScss() {
return gulp.src([
join(APP_SRC, 'assets', '**', '*.scss'), // assets/main.scss etc.
getExternalCss().map(r => r.src) // node_modules/.../*.css etc.
])
.pipe(plugins.sass(SASS_OPTIONS))
.pipe(isProd ? plugins.cached('process-external-css') : plugins.util.noop())
.pipe(plugins.postcss(processors))
.pipe(isProd ? plugins.concat(CSS_PROD_BUNDLE) : plugins.util.noop())
.pipe(gulp.dest(CSS_DEST));
}
function getExternalCss() {
return DEPENDENCIES.filter(d => /\.css$/.test(d.src));
}
Of course, this passes the css files through sass. It doesn't hurt but it's kind of a hack. Let me know if you have any suggestions.
from angular2-seed-sass.
@nareshbhatia thank you very much.
Perhaps, my version would be:
function processExternalScss() {
return merge(processAssetsCss(), processInjectedCss())
.pipe(plugins.sass(SASS_OPTIONS))
.pipe(isProd ? plugins.cached('process-external-css') : plugins.util.noop())
.pipe(plugins.postcss(processors))
.pipe(isProd ? plugins.concat(CSS_PROD_BUNDLE) : plugins.util.noop())
.pipe(gulp.dest(CSS_DEST));
}
function processAssetsCss() {
return gulp.src(join(APP_SRC, 'assets', '**', '*.scss'))
.pipe(isProd ? plugins.cached('process-assets-css') : plugins.util.noop());
}
function processInjectedCss() {
return gulp.src(getExternalCss().map(r => r.src))
.pipe(isProd ? plugins.cached('process-injected-css') : plugins.util.noop());
}
function getExternalCss() {
return DEPENDENCIES.filter(d => /\.css$/.test(d.src));
}
Your version not pass the typescript compile.
TSError: ⨯ Unable to compile TypeScript
tools/tasks/seed/build.scss.ts (51,19): Argument of type '(string | string[])[]' is not assignable to parameter of type 'string | string[]'.
from angular2-seed-sass.
Thanks, @Geoide. I will implement something like this, though I will wait for some answers on this thread: mgechev/angular-seed#750.
from angular2-seed-sass.
@Geoide, just wanted to let you know that I will not be fixing this because I have personally switched over to angular-cli. While it is still in beta, the tool has the official support from the Angular team and has the best minds working on it. I would highly recommend that you switch over too and help the angular-cli team make that tool better.
from angular2-seed-sass.
@nareshbhatia thx
from angular2-seed-sass.
Related Issues (18)
- Final directory for css HOT 3
- CSS not applied HOT 9
- problem when trying to remove about or home folders HOT 2
- Scss includePaths HOT 5
- scss files not compiled when in watch mode HOT 4
- Consider using sass-lint instead of scss-lint HOT 3
- variables.scss global usage in component stylesheets HOT 1
- Why is "assets" excluded by sass-lint? HOT 2
- App not working when upgrading from angular beta to angular rc-1 HOT 1
- Process SCSS doesn't work when bringing into line with current seed version HOT 2
- update angular version to rc1 and other related deps update HOT 4
- Prod Build Failing on Build.Bundles.App HOT 3
- npm ERR! Failed at ..... --color'. HOT 1
- Prod build is broken because the global css files are not created correctly HOT 3
- prod server HOT 1
- npm test fails because of missing css HOT 9
- Enable compass in project HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2-seed-sass.