webpack - loader/src/app/app.component.scss 中的错误没有返回字符串

Question

我在将 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 的方式，但我不知道它是什么。

Answer 1

您需要添加css-to-string-loader在 css-loader 之后。另外，正如 Luillyfe 提到的，您应该使用 html-loader 来加载 html。

{
  // 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}}
  ]
},