Webpack sass-loader 无效的 CSS

Posted 2023-02-22

【中文标题】Webpack sass-loader 无效的 CSS

【英文标题】：Webpack sass-loader Invalid CSS

【发布时间】：2018-02-22 15:21:42

【问题描述】：

每次运行我的构建时都会收到此错误。

Invalid CSS after "module.exports": expected "", was '= "data:text/x-scss'

我也尝试过使用 vanilla JS webpack 配置并得到相同的错误，所以它不是 TypeScript 配置。还尝试了 extract-text-webpack-plugin 但得到了同样的错误。实际的应用程序运行良好，但显然没有 CSS。这是配置。

import * as path from 'path';
import * as webpack from 'webpack'

const config: webpack.Configuration = 
    entry: 
        app: ['./js/main.ts']
    ,
    output: 
        path: path.resolve(__dirname, './dist/js'),
        filename: '[name].js'
    ,
    module: 
        rules:[
            
                test: /\.html$/,
                loader: 'ngtemplate-loader?prefix=/&module=app&relativeTo=' + (path.resolve(__dirname, './js/app')) + '/!html-loader'
            ,
            
                test: /\.ts$/,
                loader: 'awesome-typescript-loader'
            ,
            
                test: /\.(sass|scss|ttf|svg|woff)$/,
                use: [
                    loader: "style-loader"
                , 
                    loader: "css-loader"
                , 
                    loader: "sass-loader",
                , 
                    loader: "url-loader"
                ]
            
        ]
    


export default config

这是主 sass 文件的 sn-p。

@import "utilities/variables";
@import "utilities/animations";
@import "utilities/helpers";

在主应用文件中导入的是：

import '../sass/sass.scss';

【参考方案1】：

我认为错误是因为您以某种方式将url-loader 用于Sass 文件。将您的 webpack.config 规则拆分为 (sass|scss|ttf|svg|woff)，如下所示：

  test: /\.(ttf|svg|woff)$/,
  use: [
    loader: "url-loader"
  ]
,

  test: /\.(sass|scss)$/,
  use: [
    loader: "style-loader"
  , 
    loader: "css-loader"
  , 
    loader: "sass-loader",
  ]