Asked by:
Why does using multiple CSS files in styleUrls give me errors when using in the single home.component.html?

Question
-
User-234441352 posted
favorite I am trying to use multiple CSS files in
home.componenet.ts
but I am getting errors every time. Please assist me to fix this issue.i tried to use two approaches but with both approaches , i am getting errors.
In first approach, I am using multiple CSS files in styleUrls and in second approach, i am using multiple CSS files in
app.component.css
by importing multiple CSS files. In first approach, CSS plugin folder is under ClientApp-> app -> assets and in second approach, CSS plugin folder is under wwwroot -> dist -> assetsFirst approach :
following is my code
import { Component } from '@angular/core'; import * as $ from 'jquery'; @Component({ selector: 'home', templateUrl: './home.component.html', styleUrls: ['~/app/assets/css/style.css','~/app/assets/css/colors/green.css'] }) export class HomeComponent { public name = 'gfggfg'; } -- package.json { "name": "iSol", "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/test/karma.conf.js" }, "devDependencies": { "@angular/animations": "4.2.5", "@angular/common": "4.2.5", "@angular/compiler": "4.2.5", "@angular/compiler-cli": "4.2.5", "@angular/core": "4.2.5", "@angular/forms": "4.2.5", "@angular/http": "4.2.5", "@angular/platform-browser": "4.2.5", "@angular/platform-browser-dynamic": "4.2.5", "@angular/platform-server": "4.2.5", "@angular/router": "4.2.5", "@ngtools/webpack": "1.5.0", "@types/chai": "4.0.1", "@types/jasmine": "2.5.53", "@types/webpack-env": "1.13.0", "angular2-router-loader": "0.3.5", "angular2-template-loader": "0.6.2", "aspnet-prerendering": "^3.0.1", "aspnet-webpack": "^2.0.1", "awesome-typescript-loader": "3.2.1", "bootstrap": "3.3.7", "chai": "4.0.2", "css": "2.2.1", "css-loader": "0.28.4", "es6-shim": "0.35.3", "event-source-polyfill": "0.0.9", "expose-loader": "0.7.3", "extract-text-webpack-plugin": "2.1.2", "file-loader": "0.11.2", "html-loader": "0.4.5", "isomorphic-fetch": "2.2.1", "jasmine-core": "2.6.4", "jquery": "3.2.1", "json-loader": "0.5.4", "karma": "1.7.0", "karma-chai": "0.1.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-jasmine": "1.1.0", "karma-webpack": "2.0.3", "preboot": "4.5.2", "raw-loader": "0.5.1", "reflect-metadata": "0.1.10", "rxjs": "5.4.2", "style-loader": "0.18.2", "to-string-loader": "1.1.5", "typescript": "2.4.1", "url-loader": "0.5.9", "webpack": "2.5.1", "webpack-hot-middleware": "2.18.2", "webpack-merge": "4.1.0", "zone.js": "0.8.12" } }
--- webpack.config.js
const path = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge'); const AotPlugin = require('@ngtools/webpack').AotPlugin; const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; module.exports = (env) => { // Configuration in common to both client-side and server-side bundles const isDevBuild = !(env && env.prod); const sharedConfig = { stats: { modules: false }, context: __dirname, resolve: { extensions: [ '.js', '.ts' ] }, output: { filename: '[name].js', publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { rules: [ { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' }, { test: /\.html$/, use: 'html-loader?minimize=false' }, { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] //, //loaders: [ // { // test: /\.css$/, // include: [ // path.resolve(__dirname, "not_exist_path") // ], // loader: "style!css" // } // ] }, plugins: [new CheckerPlugin()] }; // Configuration for client-side bundle suitable for running in browsers const clientBundleOutputDir = './wwwroot/dist'; const clientBundleConfig = merge(sharedConfig, { entry: { 'main-client': './ClientApp/boot.browser.ts' }, output: { path: path.join(__dirname, clientBundleOutputDir) }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [ // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin(), new AotPlugin({ tsConfigPath: './tsconfig.json', entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'), exclude: ['./**/*.server.ts'] }) ]) }); // Configuration for server-side (prerendering) bundle suitable for running in Node const serverBundleConfig = merge(sharedConfig, { resolve: { mainFields: ['main'] }, entry: { 'main-server': './ClientApp/boot.server.ts' }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./ClientApp/dist/vendor-manifest.json'), sourceType: 'commonjs2', name: './vendor' }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only new AotPlugin({ tsConfigPath: './tsconfig.json', entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'), exclude: ['./**/*.browser.ts'] }) ]), output: { libraryTarget: 'commonjs', path: path.join(__dirname, './ClientApp/dist') }, target: 'node', devtool: 'inline-source-map' }); return [clientBundleConfig, serverBundleConfig]; };
Second approach,
-- app.component.css
@import url('~/dist/assets/css/style.css'); @import url('~/dist/assets/css/colors/green.css'); @import url('~/dist/assets/css/owl.carousel.css'); @import url('~/dist/assets/css/owl.transitions.css'); @import url('~/dist/assets/css/animate.min.css'); @import url('~/dist/assets/css/font-awesome.min.css');
Error Description:
An unhandled exception occurred while processing the request. NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "./~/app/assets/css/style.css" at webpackMissingModule (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16287:86) at L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16287:191 at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16291:2) at webpack_require (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16133:90) at webpack_require (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object.hasOwn (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:14202:77) at webpack_require (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16348:81) at webpack_require (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) Current directory is: L:\SaleStore\iSaleStore\iSaleStore Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()
When i am removing ~/ then application is throwing following errors. please see
An unhandled exception occurred while processing the request. NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "-!../../../../node_modules/css-loader/index.js!./dist/assets/css/style.css" at webpackMissingModule (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16390:75) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16390:226) at webpack_require(L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:17967:22) at webpack_require(L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:10401:22 at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:10405:2) at webpack_require(L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16131:88) at webpack_require(L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) Current directory is: L:\SaleStore\iSaleStore\iSaleStore
</div> </div>Wednesday, February 21, 2018 4:22 AM
All replies
-
User-474980206 posted
you are not using valid paths:
@import url('~/dist/assets/css/style.css');
webpack has no support for "~", its passed to the file system. while it would work on a linux/mac box where a "~" in a file path has meaning (users home directory), it will fail on windows.
Wednesday, February 21, 2018 5:02 PM -
User-234441352 posted
Thank you Bruce. By using below code :
@import url('/dist/assets/css/style.css'); @import url('/dist/assets/css/colors/green.css'); @import url('/dist/assets/css/owl.carousel.css'); @import url('/dist/assets/css/owl.transitions.css'); @import url('/dist/assets/css/animate.min.css'); @import url('/dist/assets/css/font-awesome.min.css');
following errors are throwing now:
An unhandled exception occurred while processing the request.
NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "-!../../../../node_modules/css-loader/index.js!./dist/assets/css/style.css"
at webpackMissingModule (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16391:75)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16391:226)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:17996:22)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:10407:22
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:10411:2)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16131:88)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
Current directory is: L:\SaleStore\iSaleStore\iSaleStore.and when I use below code :
@import url('dist/assets/css/style.css'); @import url('dist/assets/css/colors/green.css'); @import url('dist/assets/css/owl.carousel.css'); @import url('dist/assets/css/owl.transitions.css'); @import url('dist/assets/css/animate.min.css'); @import url('dist/assets/css/font-awesome.min.css');
and following errors are shown:
An unhandled exception occurred while processing the request.
NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "../images/ajax.gif"
at webpackMissingModule (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16427:17516)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16427:17611)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:18024:22)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16287:22
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16291:2)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16133:90)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
Current directory is: L:\SaleStore\iSaleStore\iSaleStoreFriday, February 23, 2018 7:24 PM -
User283571144 posted
Hi acupuncture,
Could you please tell me which angular version you have used now?
Normally, if you wants to import another folder css file, you should use"../".
More details about how to include another folder's css file. I suggest you could refer to below article.
https://scotch.io/tutorials/angular-shortcut-to-importing-styles-files-in-components
Best Regards,
Brando
Thursday, March 1, 2018 6:26 AM -
User-474980206 posted
I use react, not angular, so I'm not expert, but you seem to confusing how CSS models are supported in webpack. there are two common approaches:
1) imbed the css in the javascript code. with the proper plugin, an include of a css module will include the javascript code to add the CSS markup to the document.
2) use webpack to prebuild css file(s) to be included with a html <link>.
in either case you can add plugins to compile less or sass file to css.
looking at your webpack, you are using an angular plugin that return the CSS as a javascript string. the docs say you use this plugin with the component styles option. you appear to be using angular support for an external css file, but have no step in webpack to build one.
you need to manually create a css file (it probably looks like: app.component.css)
dist/assets/css/style.css
this file must be excluded from webpack, because you do not want it compiled (typical dist is not included). then delete the app.component.css, because the imports are native css imports.
your other option is to use angulars webpack plugin instead.
Friday, March 2, 2018 1:26 AM -
User-234441352 posted
Hi,
I think I am using AngularJS 4. I am trying to use above approaches but still unable to fix it.
see my package.json
{ "name": "iSaleStore", "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/test/karma.conf.js" }, "devDependencies": { "@angular/animations": "4.2.5", "@angular/common": "4.2.5", "@angular/compiler": "4.2.5", "@angular/compiler-cli": "4.2.5", "@angular/core": "4.2.5", "@angular/forms": "4.2.5", "@angular/http": "4.2.5", "@angular/platform-browser": "4.2.5", "@angular/platform-browser-dynamic": "4.2.5", "@angular/platform-server": "4.2.5", "@angular/router": "4.2.5", "@ngtools/webpack": "1.5.0", "@types/chai": "4.0.1", "@types/jasmine": "2.5.53", "@types/webpack-env": "1.13.0", "angular2-router-loader": "0.3.5", "angular2-template-loader": "0.6.2", "aspnet-prerendering": "^3.0.1", "aspnet-webpack": "^2.0.1", "awesome-typescript-loader": "3.2.1", "bootstrap": "3.3.7", "chai": "4.0.2", "css": "2.2.1", "css-loader": "0.28.4", "es6-shim": "0.35.3", "event-source-polyfill": "0.0.9", "expose-loader": "0.7.3", "extract-text-webpack-plugin": "2.1.2", "file-loader": "0.11.2", "html-loader": "0.4.5", "isomorphic-fetch": "2.2.1", "jasmine-core": "2.6.4", "jquery": "3.2.1", "json-loader": "0.5.4", "karma": "1.7.0", "karma-chai": "0.1.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-jasmine": "1.1.0", "karma-webpack": "2.0.3", "preboot": "4.5.2", "raw-loader": "0.5.1", "reflect-metadata": "0.1.10", "rxjs": "5.4.2", "style-loader": "0.18.2", "to-string-loader": "1.1.5", "typescript": "2.4.1", "url-loader": "0.5.9", "webpack": "2.5.1", "webpack-hot-middleware": "2.18.2", "webpack-merge": "4.1.0", "zone.js": "0.8.12" } }
Sunday, March 11, 2018 12:46 PM