locked
Why does using multiple CSS files in styleUrls give me errors when using in the single home.component.html? RRS feed

  • 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 -> assets

    First 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\iSaleStore

    Friday, 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