sass-loader 的无效 CSS 错误答案

【问题标题】：Invalid CSS error for sass-loadersass-loader 的无效 CSS 错误
【发布时间】：2016-02-02 23:02:42
【问题描述】：

我的 app.scss

.tes {
    color: red;
}

执行./node_modules/.bin/webpack时的输出错误

ERROR in ./~/css-loader!./~/sass-loader?indentedSyntax!./www/assets/app.scss
Module build failed: 
.tes {
     ^
      Invalid CSS after ".tes {": expected "}", was "{"
      in ./www/assets/app.scss (line 1, column 7)
 @ ./www/assets/app.scss 4:14-135 13:2-17:4 13:2-17:4 14:20-141

我的webpack.config

 module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: 'style!css!sass?indentedSyntax'
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }, {
                test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
                loader: 'file-loader?name=res/[name].[ext]?[hash]'
            }
        ]
    },

还有我的app.js

require('./www/assets/app.scss');

var angular = require('angular');
var uiRouter = require('angular-ui-router');
require('velocity-animate');
require('node-lumx');

var HomeController = require('./www/components/home/homeController');

angular.module('app', ['lumx', uiRouter]) 
... //OMITED

【问题讨论】：

由于您使用带有选项indentedSyntax 的sass 加载程序，我认为它期望您使用不使用大括号而是使用空格的sass 缩进语法：sass-lang.com/documentation/file.INDENTED_SYNTAX.html
这个正确..谢谢！你解决了我的问题..但另一个错误出现在 Uncaught SyntaxError: missing ) after argument list 但仅在浏览器上。
@ExplosionPills，您应该将其添加为答案。这是正确的答案。它也帮助了我。谢谢！

标签： angularjs webpack webpack-style-loader sass-loader css-loader

【解决方案1】：

尝试使用不带“indentedSyntax”选项的 sass 加载器作为 'style!css!sass'

更多信息，您可以在此处阅读文档：http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html

【讨论】：

【解决方案2】：

如果您想使用 sass 语法，解决方案是将文件扩展名更改为 sass，因为从 3.2.0 版本开始，sass-loader 将从文件扩展名中派生您想要使用的样式。它对我有用。

【讨论】：

或者你可以像这样为 sass-loader 使用 indentedSyntax 选项：saa?indentedSyntax