SCSS styles incorrectly loaded using webpack and angular 5

Question

I'm trying to load my scss styles during AOT compilation with Angular 5. Without AOT all works as expected but with AOT my css file looks almost the same as scss file.

scss file:

@import "bootstrap/bootstrap";
@import "rtl";
@import "responsive";
@import "formInvalid";
$fa-font-path: "~font-awesome/fonts/";
@import "../../node_modules/font-awesome/scss/font-awesome";

.app-content {
    margin-left: 235px;
    margin-right: 0;
    padding: 100px 20px;
    overflow-y: auto;

    .list-group-item {
        cursor: pointer;
    }

    .w-100p {
        width: 100%;
    }
}

loaded file:

.app-content {
    margin-left: 235px;
    margin-right: 0;
    padding: 100px 20px;
    overflow-y: auto; }
    .app-content .list-group-item {
    cursor: pointer; }
    .app-content .w-100p {
    width: 100%; }

my webpack configuration:

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var helpers = require('./helpers.js');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');

const extractSass = new ExtractTextPlugin({
    filename: "../../css/bundle.css"
});

module.exports = {
    entry: {
        'app': './src/app/main.aot.ts'
    },

    output: {
        path: path.resolve(__dirname + '/public/js/app'),
        filename: 'bundle.js',
        publicPath: '/js/app/',
        chunkFilename: '[id].[hash].chunk.js'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                'awesome-typescript-loader',
                'angular2-template-loader',
                'angular-router-loader?aot=true'
                ]
            },
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.(jpe|jpg|png|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                use: [{ loader: 'file-loader' }]
            },
            {
                test: /\.css$/,
                loaders: ['exports-loader?module.exports.toString()', 
'css-loader']
            },
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    fallback: "style-loader"
                })

            }
        ],
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: false
        }),
        extractSass
    ]};

I am importing component styles like this:

styleUrls: ['./signin.component.scss'],

And global scss file wit other dependecies imported like this:

import "../styles/app.scss"; 

in my app.component.ts file

The problem occures also in global style and in component styles. I have tried all possible webpack configurations with and without extract-text-plugin but nothing works.

I am not using angular cli.

Thanks for your help.

Answer 1

加载的CSS文件看起来完全没有被格式化的部分，但是，如果您将加载的文件的内容放入IDE并进行格式化，则会发现CSS实际上是您在SCSS中编写的内容的绝对正确的表示形式，只需将其转换为CSS。