我使用webpack作为编译器处理angular2 app,
我的webpack.config
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app/main.ts',
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
loaders: ['html-loader']
},
{
test: /\.css$/,
loaders: ['raw-loader']
},
{
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader']
}
],
exprContextCritical: false
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
我的webpack.config.dev
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js',
chunkFilename: '[id].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{ loader: 'awesome-typescript-loader', options: {
transpileOnly: true
}},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader' }
]
}
]
},
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
和我的webpack.config.prod
var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
});
module.exports = webpackMerge(commonConfig, {
entry: './src/app/main.aot.ts',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{ loader: 'awesome-typescript-loader'},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader?aot=true' }
]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!sass?")
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
extractSass
],
postcss: [
Autoprefixer
]
});
这是我的npm构建过程
"build": "webpack-dev-server --inline --progress --port 8080 --config webpack.config.dev.js",
"build:prod": "del-cli dist && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'src/app/**/*.js' 'src/app/**/*.ngfactory.ts' 'src/app/**/*.js.map' 'src/app/**/*.shim.ts' 'src/app/**/*.ngsummary.json' 'src/app/**/*.ngstyle.ts' 'dist/app'"
问题是当我运行npm run build everythings工作正常,但是如果我运行npm run build:prod,它会返回一个错误,实际上它无法访问我的scss文件
示例我的general.scss
@import 'colour-palette';
所以它返回错误
Error: Compilation failed. Resource file not found D:/git/path/path-path/front/src/app/shared/scss/colour-palette
我尝试过很多东西,但它不起作用,如果有人有解决方案,我会非常高兴
答案 0 :(得分:0)
尝试替换此
{
test: /\.scss$/,
loader:ExtractTextPlugin.extract("style", "css!sass?")
}
使用
{
test: /\.scss$/,
loader:extractSass.extract("style", "css!sass?")
}