我在配置sass-loader给我的webpack后得到了这个问题,我确实寻找了一些解决方案,但看起来不起作用。有人能帮我吗。谢谢!
这是我的webpack.config.js文件。我从头开始配置自己。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');
module.exports = function () {
return {
entry: './src/main.ts',
output: {
path: __dirname + '/dist',
filename: 'app.js'
},
resolve: {
extensions: ['.ts', '.js']
},
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
module: {
rules: [
{ test: /\.ts$/, loaders: ['@ngtools/webpack'] },
{ test: /\.css$/, loader: 'raw-loader' },
{ test: /\.html$/, loader: 'raw-loader' },
{
test: /\.scss$/,
exclude: /node_modules/,
use: [{
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
},
// Ignore warnings about System.import in Angular
{ test: /[\/\\]@angular[\/\\].+\.js$/, parser: { system: true } },
]
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'assets' }
]),
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
output: __dirname + '/dist',
inject: 'head'
}),
new ScriptExtPlugin({
defaultAttribute: 'defer'
}),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: './src/app/app.module#AppModule',
sourceMap: true
})
]
};
}
我认为问题来自于我在项目中配置sass的方式,但我不知道它是什么。
发布于 2018-07-28 03:56:16
你需要在css-loader后面添加css-to-string-loader。此外,正如Luillyfe提到的,您应该对html使用html-loader。
{
// For Angular template html
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
'css-to-string-loader',
{loader: 'css-loader', options: {sourceMap: true}},
{loader: 'sass-loader', options: {sourceMap: true}}
]
},
https://stackoverflow.com/questions/51349503
复制相似问题