Question

我遇到了跨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 dev config：

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

    ],

我几乎尝试了所有东西，但仍然相同。怎么可能，sass-loader不知道'@'是什么？请帮忙！

Answer 1

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

在根组件中：

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

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

Webpack.com中的

：

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

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

1 个答案: