首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >加载器/src/app/app.component.scss未返回字符串时出错

加载器/src/app/app.component.scss未返回字符串时出错
EN

Stack Overflow用户
提问于 2018-07-15 22:50:20
回答 1查看 6.7K关注 0票数 4

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

EN

回答 1

Stack Overflow用户

发布于 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}}
  ]
},
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51349503

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档