Чтобы скомпилировать проект с помощью Webpack, я сослался
https://github.com/samteb/angular-7-webpack-4-boilerplate
В случае файлов SCSS, импортированных из папки src / assets / styles, яПолучение этой проблемы:
Не удалось разрешить ресурс client-color-theme / color-theme / _theme-переменные из / Users / peacock / Desktop / Project / web / src / app / shared / theme / admin-header / admin-header.component.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')
})
]
});