Question

要使用Webpack编译项目，我已引用

https://github.com/samteb/angular-7-webpack-4-boilerplate

对于从src / assets / styles文件夹导入的SCSS文件，出现此问题：

无法从/Users/peacock/Desktop/Project/web/src/app/shared/theme/admin-header/admin-header.component解析资源client-color-theme / color-theme / _theme-variables .scss


SCSS:
@import 'client-color-theme/color-theme/_theme-variables';

 $borderColor: rgba(105, 105, 117, 0.2);

 .main-header {
   background-color: $titleBarColor;
   border-bottom: 1px solid $borderColor;
 }

Webpack Config:

'use strict';

const CleanWebpackPlugin   = require('clean-webpack-plugin');
const HtmlWebpackPlugin    = require('html-webpack-plugin');

const helpers              = require('./helpers');
const isDev                = false;

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

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

    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    { loader: 'style-loader', options: { sourceMap: isDev } },
                    { loader: 'css-loader', options: { sourceMap: isDev } },
                    { loader: 'sass-loader', options: { sourceMap: isDev } }
                ],
                include: helpers.root('src', 'assets')
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    'to-string-loader',
                    { loader: 'css-loader', options: { sourceMap: isDev } },
                    { loader: 'sass-loader', options: { sourceMap: isDev } }
                ],
                include: helpers.root('src', 'app')
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(
            helpers.root('dist'), { root: helpers.root(), verbose: true }),

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


webpack prod config:



'use strict';

const webpackMerge            = require('webpack-merge');
const ngw                     = require('@ngtools/webpack');
const UglifyJsPlugin          = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano                 = require('cssnano');

const commonConfig            = require('./webpack.config.common');
const helpers                 = require('./helpers');

module.exports = webpackMerge(commonConfig, {
    mode: 'production',

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

    optimization: {
        noEmitOnErrors: true,
        splitChunks: {
            chunks: 'all'
        },
        runtimeChunk: 'single',
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true
            }),

            new OptimizeCSSAssetsPlugin({
                cssProcessor: cssnano,
                cssProcessorOptions: {
                    discardComments: {
                        removeAll: true
                    }
                },
                canPrint: false
            })
        ]
    },

    module: {
        rules: [
            {
                test: /^(?!.*\.spec\.ts$).*(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                loader: '@ngtools/webpack'
            }
        ]
    },

    plugins: [
        new ngw.AngularCompilerPlugin({
            tsConfigPath: helpers.root('tsconfig-custom.aot.json'),
            entryModule: helpers.root('src', 'app', 'app.module#AppModule')
        })
    ]
});

Answer 1

我猜想您的客户端颜色主题/颜色主题/ _主题变量必须位于/ Users / peacock / Desktop / Project / web / src / app / shared / theme / admin-header /文件夹的外部。您需要在@import语句中更正路径

@import 'RELATIVE_PATH_HERE/client-color-theme/color-theme/_theme-variables';

当将scss文件导入另一个scss文件时，Webpack AOT编译会引发错误

1 个答案: