Webpack sass-loader 不理解 '@' 并抛出错误答案

【问题标题】：Webpack sass-loader doesn't understand '@' and throws errorWebpack sass-loader 不理解 '@' 并抛出错误
【发布时间】：2016-09-13 16:33:49
【问题描述】：

我在通过 webpack 加载 scss 文件时遇到问题。我看到，很多人都有同样的问题，但没有解释。

基本上，我得到了错误：

ERROR in ./src/app/theme.scss
Module parse failed: C:\Users\pi15463\www\crm_ng2\src\app\theme.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)

我的主题Scss：

@import 'theme/variables/variables.scss';
@import 'theme/mixins/mixins.scss';
@import 'theme/nba.component.scss';
@import 'theme/layout.scss';

我的 webpack 通用配置：

{
                 test: /\.scss$/,
                 loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader?sourceMap' }),
                 include: helpers.root('src', 'app'),
                 exclude: helpers.root('node_modules')
             }

webpack 开发配置：

plugins: [
        new ExtractTextPlugin({ filename: '[name].css', allChunks: true })

    ],

我几乎尝试了所有东西，但还是一样。怎么可能，那个 sass-loader 不知道 '@' 是什么？请帮忙！

【问题讨论】：

我相信 style-loader 需要成为常规加载序列的一部分，而不仅仅是作为后备。类似loader: 'style-loader!css-loader!sass-loader?sourceMap
什么是helpers.root()？它是否正确生成 Windows 路径？问题是不是 SASS 加载程序无法识别@，问题是根本没有调用 SASS 加载程序。一个快速的解决方法可能是从加载器配置中删除 include 属性。
@robertklep Helpers.root 是一个辅助函数，它正在检查根目录是否为根目录。而已。我看到 sass-loader 根本没有运行，因为我甚至无法使用它来验证简单的 css。为什么 sass loader-根本不起作用，我正确安装了 node-sass 和 sass-loader...
@MarioTacke 我尝试了您的加载程序语句，但没有，基本上对于开发配置我更喜欢使用 ExtractTextPlugin()。
@UlandNimblehoof 您是否尝试完全删除include？这通常是 Webpack 不使用加载器的原因。

标签： angular sass webpack

【解决方案1】：

我通过这些步骤解决了这个问题（现在，我对意外字符'@'没有问题）：

在根组件中：

import './theme.scss';
@Component({

    selector: 'my-app',
    template: `
        <a routerLink="/nba">nba</a>
        <router-outlet></router-outlet>`
})

在 Webpack.common 中：

 {
       test: /\.scss$/,
       loader: 'style-loader!css-loader!sass-loader?sourceMap',
       exclude: helpers.root('node_modules')
 }

【讨论】：