Ошибка: ожидаемые «стили» должны быть массивом строк

Question

Я использовал this seed project в качестве основы для моего нового проекта Angular 2. К сожалению, он не настроен на использование scss, поэтому я должен сам добавить эту конфигурацию.

Я использую Angular Material так вводит тему по умолчанию в моем приложении компоненте, как это:

@Component({ 
    selector: 'my-app', 
    styles: [require('./app.component.css'), require('./material2-app-theme.scss')], 
    templateUrl: './app.component.html' 
}) 

Однако, это дает следующее сообщение об ошибке в браузере во время выполнения:

Uncaught Error: Expected 'styles' to be an array of strings. 

У меня есть попробовал различные конфигурации в моей конфигурации webpack, и я в настоящее время собираюсь с этим:

{ 
    test: /\.css$/, 
    loaders: ['to-string-loader', 'css-loader'] 
}, 
{ 
    test: /\.scss$/, 
    use: ['style-loader', 'css-loader', 'sass-loader'], 
    include: [helpers.root('src', 'styles')] 
} 

Есть несколько ссылок на эту ошибку на interweb, но ни одна из них не решает мою проблему. Любые идеи, как это исправить?

Answer 1

Вы только передавая css файлы, а не scss файлы, к to-string-loader, так требуют (»./ Материал2-приложение-theme.scss') не возвращает строку,

Измените scss погрузчику ...

{ 
    test: /\.scss$/, 
    loaders: ['to-string-loader', 'css-loader', 'sass-loader'], 
    include: [helpers.root('src', 'styles')] 
} 

Также убедитесь, что ./material2-app-theme.scss находится в папке include

---

FYI Вы можете легко объединить эти два загрузчики в один и просто использовать ...

{ 
    test: /\.(css|scss)$/, 
    loaders: ['to-string-loader', 'css-loader', 'sass-loader'] 
} 

Answer 2

Для завершения этого вопроса, если вы используете ExtractTextPlugin, то «webpack.config.js» является:

{ 
    test: /\.(css|scss)$/, 
    loaders: ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     use: ['css-loader?sourceMap', 'scss-loader?sourceMap'] 
    }) 
} 

Тогда я решаю вопрос с:

{ 
    test: /\.(css|scss)$/, 
    loaders: ['to-string-loader'].concat(ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     use: ['css-loader?sourceMap', 'scss-loader?sourceMap'] 
    })) 
}