Question

我正在尝试使用Angular 5在AOT编译期间加载我的scss样式。没有AOT，所有工作都按预期工作，但使用AOT我的css文件看起来几乎与scss文件相同。

scss文件：

flat file  (issue concurrency).
Key value table like MongoDB.

加载文件：

@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%;
    }
}

我的webpack配置：

.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%; }

我正在导入这样的组件样式：

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
    ]};

全局scss文件和其他依赖导入如下：

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

在我的app.component.ts文件中

问题还出现在全局样式和组件样式中。我已经尝试了所有可能的webpack配置，包括和不使用extract-text-plugin，但没有任何效果。

我没有使用角度cli。

感谢您的帮助。

Answer 1

加载的CSS文件看起来完全正常，除了没有确定格式化，但是如果你将加载文件的内容放入IDE并格式化它，你会看到CSS实际上是你所写内容的绝对正确表示在你的SCSS中，只是被转换为CSS。

使用webpack和angular 5错误地加载SCSS样式

1 个答案: