Angular 用于搜索和包含组件级SASS样式的Webpack 4规则

我有一个基于模板的角度6 SPA

现在，我有两个自定义组件，其中SCSS文件仅与组件本身相关。这些文件位于SPA的

/ClientApp

文件夹中

webpack.prod.js

中SASS输入的当前规则为

const path = require('path');
const rxPaths = require('rxjs/_esm5/path-mapping');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpackTools = require('@ngtools/webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
    .BundleAnalyzerPlugin;
const helpers = require('./webpack.helpers');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const ROOT = path.resolve(__dirname, '..');

console.log('@@@@@@@@@ USING PRODUCTION @@@@@@@@@@@@@@@');

module.exports = {
    mode: 'production',
    entry: {
        polyfills: './ClientApp/polyfills.ts',
        vendor: './ClientApp/vendor.ts',
        app: './ClientApp/main-aot.ts'
    },

    output: {
        path: ROOT + '/wwwroot/',
        filename: 'dist/[name].[hash].bundle.js',
        chunkFilename: 'dist/[id].[hash].chunk.js',
        publicPath: '/'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json'],
        alias: rxPaths()
    },

    devServer: {
        historyApiFallback: true,
        stats: 'minimal',
        outputPath: path.join(ROOT, 'wwwroot/')
    },

    module: {
        rules: [
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                use: '@ngtools/webpack',
                parser: {
                    system: true
                }
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
                use: 'file-loader?name=assets/[name]-[hash:6].[ext]',
                parser: {
                    system: true
                }
            },
            {
                test: /favicon.ico$/,
                use: 'file-loader?name=/[name].[ext]',
                parser: {
                    system: true
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
                parser: {
                    system: true
                }
            },
            {
                test: /\.scss$/,
                include: path.join(ROOT, 'ClientApp/styles'),
                use: ['style-loader', 'css-loader', 'sass-loader'],
                parser: {
                    system: true
                }
            },
            {
                test: /\.scss$/,
                exclude: path.join(ROOT, 'ClientApp/styles'),
                use: ['raw-loader', 'sass-loader'],
                parser: {
                    system: true
                }
            },
            {
                test: /\.html$/,
                use: 'raw-loader',
                parser: {
                    system: true
                }
            }
        ],
        exprContextCritical: false
    },
    plugins: [
        // new BundleAnalyzerPlugin({
        //  analyzerMode: 'static',
        //  generateStatsFile: true
        // }),
        new webpackTools.AngularCompilerPlugin({
            tsConfigPath: './tsconfig-aot.json'
            // entryModule: './ClientApp/app/app.module#AppModule'
        }),

        // new webpack.optimize.ModuleConcatenationPlugin(),

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

        new CleanWebpackPlugin(['./wwwroot/dist', './wwwroot/assets'], {
            root: ROOT
        }),
        new webpack.NoEmitOnErrorsPlugin(),

        // new UglifyJSPlugin({
        //   parallel: 2
        // }),

        // new webpack.optimize.CommonsChunkPlugin({
        //   name: ['vendor', 'polyfills']
        // }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            inject: 'body',
            template: './ClientApp/index.html',
            chunksSortMode: 'none' //fix for cyclic dependency
        }),

        new CopyWebpackPlugin([
            { from: './ClientApp/images/*.*', to: 'assets/', flatten: true }
        ])
    ]
};

---

这显然只是加载位于

样式中的SASS文件。是否可以在应用程序文件夹中添加某种递归搜索以查找其他SASS文件？或者我需要专门导入styles.scs。
webpack确认每个依赖项的方法是从入口点开始分析依赖项树。只有当它们是已知的依赖项时，Webpack才会捆绑/接触它们，即：


从'b'导入{a}；
导入“styles.scss”；
...

要处理资产，必须为每种类型的依赖项提供适当的加载程序<代码>文件加载器

通常用于图像。您声明的方式是正确的

对于css，您需要（顺序很重要）：

样式加载器

，

css加载器

对于SCS，您需要（顺序很重要）：

样式加载器

，

css加载器

，

sass加载器

---

在配置中，scss文件有两条规则，这可能是使用原始加载程序（纯文本）时的问题。

您需要指定导入。否则webpack将不知道该资产。Webpack从entrypoint开始分析tree.hmm的叶子，好的，因此对于每个具有特定.SASS文件的组件，我需要手动将其导入styles文件夹中的styles.scs？是的。或者，您可以在其等效组件上导入每个sass文件。A有A.sass。依此类推。好吧，如果它们被导入component.ts中，那么文件加载器应该通过正确的方式加载样式？（我这样做只是看起来并不是通过图片链接来创建资产）。不，这不是文件加载器的工作。发布您的网页配置，以便我们也可以进行分析。