grunt-contrib-jade unable to read file (EISDIR) - gruntjs

Executing grunt jade:dev on this
grunt.initConfig({
"jade": {
"dev": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
},
"prod": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "prod"
}
}
}
}
});
fails with
Warning: Unable to read "src" file (Error code: EISDIR). Use --force to continue.
But executing grunt jade on this
grunt.initConfig({
"jade": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
}
});
succeeds.
There is no difference between the configuration of the tasks I'm running in both cases. What am I missing?

I don't know why, but this seems to work:
grunt.initConfig({
"jade": {
"dev": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true,
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
},
"prod": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true,
"options": {
"pretty": true,
"data": {
"environment": "prod"
}
}
}
}
});
All I did was remove the enclosing "files" object.

Related

Angular. Global styles do not apply when building with localize

I added localization to my Angular v12.2.7 app and set localize=true.
I run the command to build the app. And it builds the app to 3 folders (en, uk, ru).
npm run build -- --optimization=false --configuration=staging
I set up my nginx.config so that it returns the app with the needed language
location ~ ^/(en|ru|uk) {
try_files $uri /$1/index.html?$args;
}
Everything works fine but it turned out that global styles (from src/styles.scss) do not apply when building the localized app.
Styles are correctly included in angular.json:
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"BooTravel": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"i18n": {
"sourceLocale": "en",
"locales": {
"uk": {
"translation": "src/i18n/messages.uk.xlf",
"baseHref": "/uk/"
},
"ru": {
"translation": "src/i18n/messages.ru.xlf",
"baseHref": "/ru/"
}
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"localize": true,
"outputPath": "dist/",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"preprod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.preprod.ts"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
},
"localhost": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.localhost.ts"
}
]
},
"uk": {
"localize": ["uk"]
},
"ru": {
"localize": ["ru"]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "BooTravel:build:production"
},
"preprod": {
"browserTarget": "inQuestUI:build:preprod"
},
"staging": {
"browserTarget": "inQuestUI:build:staging"
},
"localhost": {
"browserTarget": "inQuestUI:build:localhost"
},
"development": {
"browserTarget": "BooTravel:build:development"
},
"uk": {
"browserTarget": "BooTravel:build:uk"
},
"ru": {
"browserTarget": "BooTravel:build:ru"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "BooTravel:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "BooTravel"
solved:
It turned out that nginx served css files as text/plain
The solution was found here (removing http section from nginx):
Prevent nginx from serving css files as text/plain

How to enable SWC Aliased imports in Next JS?

Upgrading from babel to SWC. I deleted the .babelrc file but now the path aliases are no longer recognized in my project. Tried to restore this with a .swrc
.swrc
{
"jsc": {
"target": "ES2017",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"]
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"lib": ["es6", "dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNEXT",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"],
}
},
"exclude": ["node_modules", "**/*.stories.tsx"],
"include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
}
14:24 Error: Unable to resolve path to module '#components/NavBar'
.eslintrc.json
{
"root": true,
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"#typescript-eslint", "react", "prettier"
],
"rules": {
"prefer-const": "off",
"import/extensions": "off",
"jsx-a11y/anchor-is-valid": "off",
"import/no-cycle": [0, { "ignoreExternal": true }],
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/prop-types": "off",
"react-hooks/exhaustive-deps": "off",
"react/no-unescaped-entities": "off",
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
"react/jsx-props-no-spreading": ["error", { "html": "ignore", "custom": "ignore", "exceptions": [""] }],
// needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": [
"error",
{ "functions": false, "classes": false, "variables": true }
],
"#typescript-eslint/ban-ts-comment": "off",
"#typescript-eslint/no-explicit-any": "off"
},
"settings": {
"import/resolver": {
"babel-module": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
old .babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"#components": "./components",
"#api": "./api",
"#models": "./models",
"#screens": "./screens",
"#hooks": "./hooks",
"#services": "./services",
"#constants": "./constants",
"#context": "./context",
"#queries": "./queries",
"#data": "./data",
"#typeDefs": "./types",
"#generated": "./generated",
"#utils": "./utils",
"#pages": "./pages",
"#public": "./public"
}
}
]
]
}
Was able to solve this with a few tweaks.
Remove the import/resolver section of .eslintrc.json
Extend next in eslint.

TailwindCSS is way too big with Angular build

When I use Tailwind to style an Angular application with a custom webpack, the styles.js chunk is huge after running ng build, coming in at around 30mb. This not only takes forever to build, but also slows down my web app.
After purging the Tailwind, the styles.js chunk is far smaller (~100kb), however 30mb just seems ridiculously big, even un-purged.
This even applies to a fresh application built with https://github.com/notiz-dev/ngx-tailwind, so I'm not sure what is causing the issue.
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
},
};
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngxTailwind": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"extraWebpackConfig": "webpack.config.js",
"outputPath": "dist/ngxTailwind",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"extraWebpackConfig": "webpack.config.js",
"browserTarget": "ngxTailwind:build"
},
"configurations": {
"production": {
"browserTarget": "ngxTailwind:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngxTailwind:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"extraWebpackConfig": "webpack.config.js",
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ngxTailwind:serve"
},
"configurations": {
"production": {
"devServerTarget": "ngxTailwind:serve:production"
}
}
}
}
}
},
"defaultProject": "ngxTailwind",
"cli": {
"analytics": "c9efd59e-9db9-4f26-9a6f-e35b477d8e5a"
}
}
styles.scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
Does anyone have any idea as to why it's so big? I understand it is not purged, but https://tailwindcss.com/docs/optimizing-for-production claims the uncompressed size is under 4mb, why am I getting nearly 7 times this?
Just change tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
//Other Code
};
then build: ng build --prod
Reference: Enabling manually

Force angular cli gz generation

I'm trying to get a dist folder populated with the standard files + the .gz version of them. I did ng eject to get the webpack.config.js file so I could add the compression plugin https://github.com/webpack-contrib/compression-webpack-plugin. I added the new CompressPlugin({}) as the last plugin and marked the ejected: false in the .angular-cli.json file.
When I then run ng build I don't get any .gzip/.gz files generated which I would expect have.
Is there something I am missing or doing wrong? The full webpack file (mostly generated by ng new is:
const fs = require('fs');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');
const CompressionPlugin = require("compression-webpack-plugin");
const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin } = require('webpack');
const { NamedLazyChunksWebpackPlugin, BaseHrefWebpackPlugin } = require('#angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('#ngtools/webpack');
const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
const minimizeCss = false;
const baseHref = "";
const deployUrl = "";
const postcssPlugins = function () {
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /#preserve|#license|[##]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
autoprefixer: false,
safe: true,
mergeLonghand: false,
discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
};
return [
postcssUrl({
url: (URL) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/') || URL.startsWith('//')) {
return URL;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${URL}`;
}
else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
}
}),
autoprefixer(),
].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};
module.exports = {
"resolve": {
"extensions": [
".ts",
".js"
],
"modules": [
"./node_modules",
"./node_modules"
],
"symlinks": true
},
"resolveLoader": {
"modules": [
"./node_modules",
"./node_modules"
]
},
"entry": {
"main": [
"./src\\main.ts"
],
"polyfills": [
"./src\\polyfills.ts"
],
"styles": [
"./src\\styles.css"
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
},
"module": {
"rules": [
{
"enforce": "pre",
"test": /\.js$/,
"loader": "source-map-loader",
"exclude": [
/(\\|\/)node_modules(\\|\/)/
]
},
{
"test": /\.html$/,
"loader": "raw-loader"
},
{
"test": /\.(eot|svg|cur)$/,
"loader": "file-loader?name=[name].[hash:20].[ext]"
},
{
"test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
"loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"test": /\.ts$/,
"loader": "#ngtools/webpack"
}
]
},
"plugins": [
new NoEmitOnErrorsPlugin(),
new CopyWebpackPlugin([
{
"context": "src",
"to": "",
"from": {
"glob": "assets/**/*",
"dot": true
}
},
{
"context": "src",
"to": "",
"from": {
"glob": "favicon.ico",
"dot": true
}
}
], {
"ignore": [
".gitkeep"
],
"debug": "warning"
}),
new ProgressPlugin(),
new CircularDependencyPlugin({
"exclude": /(\\|\/)node_modules(\\|\/)/,
"failOnError": false
}),
new NamedLazyChunksWebpackPlugin(),
new HtmlWebpackPlugin({
"template": "./src\\index.html",
"filename": "./index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "Webpack App",
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
}),
new BaseHrefWebpackPlugin({}),
new CommonsChunkPlugin({
"name": [
"inline"
],
"minChunks": null
}),
new CommonsChunkPlugin({
"name": [
"vendor"
],
"minChunks": (module) => {
return module.resource
&& (module.resource.startsWith(nodeModules)
|| module.resource.startsWith(genDirNodeModules)
|| module.resource.startsWith(realNodeModules));
},
"chunks": [
"main"
]
}),
new SourceMapDevToolPlugin({
"filename": "[file].map[query]",
"moduleFilenameTemplate": "[resource-path]",
"fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
"sourceRoot": "webpack:///"
}),
new CommonsChunkPlugin({
"name": [
"main"
],
"minChunks": 2,
"async": "common"
}),
new NamedModulesPlugin({}),
new AotPlugin({
"mainPath": "main.ts",
"replaceExport": false,
"hostReplacementPaths": {
"environments\\environment.ts": "environments\\environment.ts"
},
"exclude": [],
"tsConfigPath": "src\\tsconfig.app.json",
"skipCodeGeneration": true
}),
new CompressionPlugin({})
],
"node": {
"fs": "empty",
"global": true,
"crypto": "empty",
"tls": "empty",
"net": "empty",
"process": true,
"module": false,
"clearImmediate": false,
"setImmediate": false
},
"devServer": {
"historyApiFallback": true
}
};
I'm using #angular/cli 1.4.4.
Note the main reason why I'm doing that is to improve some SEO recommendations because apparently my vendor.css is 600Kb big and being pointed out in the PageSpeed Ingishts: Your page has 1 blocking CSS resources. This causes a delay in rendering your page. It contains 3rd party css only - actually only bootstrap + font-awesome. Unless there is something else to prevent this I thought of compression. I also thought that the web server would auto compress and serve .gz files but I don't know whether that test would apply.
Any help is much appreciated! Thanks
Only ejected application's build is processed by exposed on the root webpack.config.js file. Application which is not ejected (or set to ejected: false) will completely ignore this webpack.config.js file.
So in order to use gzipped files you will need to work with ejected app and use new npm scripts automatically added to package.json.
Instead of 'ng build', now you should run:
npm run build
my related answers that may help:
Angular4 build - gzip missing
How to undo Angular 2 Cli ng-eject

ng server is not outputing any css

I'm using #angular/cli when I execute ng server
the css code doesn't show up in anyway on the webpage.
This is the angular-cli.json
{
"project": {
"version": "1.0.0-beta.18",
"name": "botshop"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../vendor/font-awesome/css/font-awesome.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/metismenu/src/metisMenu.css",
"./assets/css/sb-admin-2.min.css",
"styles.css"
],
"scripts": [
"../systemjs.config.js",
"../node_modules/core-js/shim.js",
"../node_modules/zone.js/dist/zone.js",
"../node_modules/reflect-metadata/Reflect.js",
"../node_modules/systemjs/dist/system.src.js",
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/metismenu/src/metisMenu.js",
"./assets/js/sb-admin-2.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
I'm getting outputed .js files but not any css.
I have upgraded ng-cli to the latest version and I'm using the last nodejs LTS
Any ideas?

Resources