AoT build does not compile scss

[syron]

Currently having a problem using ngx-chips in a webpack project where the aot build does not compile scss files and seems to put the scss content into <style> tags instead of compiled css.

ngx-chips version: 1.4.6
webpack: 3.3.0

In style in aot build it looks like this:

$fon`t-family[_ngcontent-c3]:   "Roboto"[_ngcontent-c3], "Helvetica[_ngcontent-c3]   Neue"[_ngcontent-c3], sans-serif[_ngcontent-c3]   !default[_ngcontent-c3];

$tag-color[_ngcontent-c3]:   #444[_ngcontent-c3]   !default[_ngcontent-c3];
$tag-border-radius[_ngcontent-c3]:   16px[_ngcontent-c3]   !default[_ngcontent-c3];
$tag-font-size[_ngcontent-c3]:   1em[_ngcontent-c3]   !default[_ngcontent-c3];
$tag-font-weight[_ngcontent-c3]:   400[_ngcontent-c3]   !default[_ngcontent-c3];
$tag-letter-spacing[_ngcontent-c3]:   0.05rem[_ngcontent-c3]   !default[_ngcontent-c3];
$tag-margin[_ngcontent-c3]:   0.1rem[_ngcontent-c3]   0.3rem[_ngcontent-c3]   0.1rem[_ngcontent-c3]   0[_ngcontent-c3]   !default[_ngcontent-c3];
$tag-padding[_ngcontent-c3]:   0.08rem[_ngcontent-c3]   0.45rem[_ngcontent-c3]   !default[_ngcontent-c3];
$tag-height[_ngcontent-c3]:   32px[_ngcontent-c3]   !default[_ngcontent-c3];
$tag-line-height[_ngcontent-c3]:   34px[_ngcontent-c3]   !default[_ngcontent-c3];

$input-font-size[_ngcontent-c3]:   1em[_ngcontent-c3];
$input-padding[_ngcontent-c3]:   0[_ngcontent-c3]   0.5rem[_ngcontent-c3];
$input-border[_ngcontent-c3]:   none[_ngcontent-c3];
$input-height[_ngcontent-c3]:   38px[_ngcontent-c3];

$container-padding[_ngcontent-c3]:   0.25rem[_ngcontent-c3]   0[_ngcontent-c3]   !default[_ngcontent-c3];
$container-height[_ngcontent-c3]:   32px[_ngcontent-c3]   !default[_ngcontent-c3];
$container-margin[_ngcontent-c3]:   0.1em[_ngcontent-c3]   0[_ngcontent-c3]   !default[_ngcontent-c3];

$error-message-font-size[_ngcontent-c3]:   0.8em[_ngcontent-c3]   !default[_ngcontent-c3];
$error-message-margin[_ngcontent-c3]:   0.5em[_ngcontent-c3]   0[_ngcontent-c3]   0[_ngcontent-c3]   0[_ngcontent-c3]   !default[_ngcontent-c3];
$error-message-color[_ngcontent-c3]:   $color-error-default[_ngcontent-c3]   !default[_ngcontent-c3];

In dev build there is no problem at all, only in AoT build.

The webpack configuration webpack.aot.js looks like this

const fs = require('fs');
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');

const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin, ProvidePlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');
var webpack = require('webpack');
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), '.', '$$_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 = {
  "externals": /^(jquery|\$)$/i,
  "resolve": {
      "plugins": [
          new TsConfigPathsPlugin({ tsConfig: "tsconfig-aot.json", compiler: 'typescript' })
      ],
    
    "alias": {
      "jquery": "jquery/src/jquery"
    },

    "extensions": [
      ".ts",
      ".js"
    ],
    "modules": [
      "./node_modules",
      "./typings"
    ]
  },
  "resolveLoader": {
    "modules": [
      "./node_modules"
    ]
  },
  "entry": {
    "main": [
      "./app\\main-aot.ts"
    ],
    "polyfills": [
      "./app\\polyfills.ts"
    ],
    "styles": [
      "./app\\styles.css"
    ]
  },
  
  "output": {
      "path": path.join(process.cwd(), "dist/aot"),
      "filename": "[name].bundle.js",
      "chunkFilename": "[id].chunk.js", 
      "publicPath": "/dist/aot/"
  },
  
  "module": {
    "rules": [
      {
        "enforce": "pre",
        "test": /\.js$/,
        "loader": "source-map-loader",
        "exclude": [
          /\/node_modules\//,
          path.join(__dirname, 'node_modules', '@angular/compiler')
        ]
      },
      {
        "test": /\.json$/,
        "loader": "json-loader"
      },
      {
        "test": /\.html$/,
        "loader": "raw-loader"
      },
      {
        "test": /\.(eot|svg)$/,
        "loader": "file-loader?name=[name].[hash:20].[ext]"
      },
      {
        "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
      },
      {
        "exclude": [
          path.join(process.cwd(), "app\\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(), "app\\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(), "app\\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(), "app\\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(), "app\\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(), "app\\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(), "app\\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(), "app\\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$/,
        "exclude": path.resolve(__dirname, "node_modules"),
        "use": [
            {
                "loader": "awesome-typescript-loader",
                "query": {
                    "configFileName": './tsconfig-aot.json'
                }
            },
            { 
                "loader": 'angular-router-loader?aot=true&genDir=app/aot/',
            },
            {
                "loader": "angular2-template-loader"
            }
            
        ]
      }
    ]
  },
  "plugins": [
    new NoEmitOnErrorsPlugin(),
    new ProgressPlugin(),
    new SourceMapDevToolPlugin({
      "filename": "[file].map[query]",
      "moduleFilenameTemplate": "[resource-path]",
      "fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
      "sourceRoot": "webpack:///"
    }),
    new HtmlWebpackPlugin({
      "template": "./app\\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 NamedModulesPlugin({}),
    
   /* new AotPlugin({
        "mainPath": "main-aot.ts",
        "hostReplacementPaths": {
            "environments\\environment.ts": "environments\\environment.ts"
        },
        "exclude": [],
        "tsConfigPath": "tsconfig-aot.json",
        "skipCodeGeneration": true
    }),*/
     new webpack.LoaderOptionsPlugin({
         minimize: true,
         debug: false
     }),
      new webpack.DefinePlugin({
          'process.env': {
              'ENV': JSON.stringify('production')
          }
      }),
      new webpack.optimize.UglifyJsPlugin({
          beautify: false,
          mangle: {
              screw_ie8: true,
              keep_fnames: true
          },
          compress: {
              screw_ie8: true
          },
          comments: false
      })
  ],
  "node": {
    "fs": "empty",
    "global": true,
    "crypto": "empty",
    "tls": "empty",
    "net": "empty",
    "process": true,
    "module": false,
    "clearImmediate": false,
    "setImmediate": false
  },
  "devServer": {
    "historyApiFallback": true
  }
};

Any idea what the problem might be?

[Gbuomprisco]

Hi @syron,

I can't quite identify the issue here. The style provided by ngx-chips is bundled with the JS, not sure why the styles are injected that way though

[syron]

Hi, Thanks for your reply. I do not know why neither, but it's injected in scss and I have no idea how I can manage to get the scss being compiled and then injected in the aot build as css.

[SaAkSin]

I have a same problem too.

[kadosh1000]

Same issue here.
@Gbuomprisco I think the easiest solution would be to precompile the scss files to css and changes the StylesUrls in the components to use the css files instead of the scss.

[xtianus79]

@Gbuomprisco you're having issues right now using AOT and trying to compile scss files which the angular cli does for you. However, this issues is related to the issue over in your other thread of AOT not working... #451

there is a dependency error that is causing the failure of your build. i can tell by the "cryptic" nothing to do with the issue error you are having that was similiar to my error on my repo that I fixed by adjusting my AOT version. In fact, there are a few packages you need to adjust for this to work. extract-text-webpack-plugin is one of them.

As of now I am going to fork your branch and try to adjust the packages to work with my build. if they do I will let you know and you can change them in yours.