带有 Webpack 的 Angular 4 - SCSS 文件未加载

Question

我的情况：

在开发 Angular 4 应用程序时，我想使用 Angular 材质。 由于他们只提供几个主题，我需要创建一个自定义主题。 他们的文档解释说，为了覆盖默认主题，您应该创建一个 scss 文件，这就是我所做的。 但是，由于我的项目之前没有使用 scss 文件，我不得不调整我的 webpack 配置。 我试图在不同的地方导入 scss 文件，例如在应用程序组件的 styleUrls 中，或者只是通过导入，似乎没有任何效果。 Angular 材质继续使用默认主题。

我的 Webpack 基础文件：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

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

    resolve: {
        extensions: ['.js', '.ts'],
        modules: [
            path.join(__dirname, 'node_modules')
        ]
    },

    resolveLoader: {
        modules: [
            path.join(__dirname, 'node_modules')
        ]
    },

    module: {
        loaders: [{
            test: /\.ts$/,
            loaders: ['ts-loader', 'angular2-template-loader']
        }, {
            test: /\.html$/,
            loader: 'html-loader'
        }, {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[hash].[ext]'
        }, {
            test: /\.css$/,
            exclude: path.join(__dirname, 'src', 'modules'),
            loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
        }, {
            test: /\.css$/,
            include: path.join(__dirname, 'src', 'modules'),
            loader: 'raw-loader'
        }, {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader']
        }
      ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            path.join(__dirname, 'src')
        ),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),

        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

webpack 开发文件：

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var baseConfig = require('./webpack.config.base.js');
var path = require('path');

module.exports = webpackMerge(baseConfig, {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: 'http://localhost:8080/',
        filename: 'js/[name].js',
        chunkFilename: 'js/[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('css/[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

webpack 生产文件：

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var baseConfig = require('./webpack.config.base.js');
var path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(baseConfig, {
    devtool: 'source-map',

    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: 'js/[name].[hash].js',
        chunkFilename: 'js/[id].[hash].chunk.js'
    },

    htmlLoader: {
        minimize: false // workaround for ng2
    },

    plugins: [
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('css/[name].[hash].css'),
        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(ENV)
            }
        })
    ]
});

我在其中定义我的 cusotm Angular Material 主题的 scss 文件：

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-orange, 300);
$my-app-warn:    mat-palette($mat-red, 600);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

我目前如何尝试在组件的装饰器中导入 scss 文件：

@Component({
  selector: 'app-property-detail',
  templateUrl: './property.detail.component.html',
  styleUrls: ['./property.detail.component.css', '../../assets/css/ngMaterialTheme.scss']
})

在发布这个问题之前，我已经做了一些研究。

我发现但没有帮助：

• Webpack 不加载 scss 文件
• https://github.com/gdi2290/angular-starter/wiki/How-to-include-SCSS-in-components
• https://coursetro.com/posts/code/116/Create-your-own-Angular-5-Material-Theme
• https://material.angular.io/guide/theming

任何帮助将不胜感激！

编辑：

我有一个通用的styles.css 文件，它被导入到应用程序模块中。 我试图在那里导入scss文件：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import './ngMaterialTheme.scss';

但是，然后我收到一个 webpack 错误说：

./~/css-loader?sourceMap!./src/assets/css/ngMaterialTheme.scss Module not found: Error: Can't resolve '@angular/material/theming' in ...

我认为这可能很有用，因为他们建议这样做：

• 如何在 Angular 2 中添加导入 SCSS 文件

Answer 1

我已经通过替换解决了我的问题

        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader']
        }

和：

        {
            test: /\.scss$/,
             use: [
                  { loader: "style-loader" },
                  { loader: "css-loader" },
                  { loader: "sass-loader" }
              ]
        }

我现在在 app 模块中同时导入 styles.css 和 scss 文件：

import '../../assets/css/styles.css';
import '../../assets/css/ngMaterialTheme.scss';

Answer 2

对于 Webpack 5（及更高版本？）

  module: {
     rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.scss$/, use: 'scss-loader' } //etc.
    ]
  }