J'utilise this graine project to comme base de mon nouveau projet Angular 2. Malheureusement, il n'est pas configuré pour utiliser scss, je dois donc ajouter cette configuration moi-même.
J'utilise Angular Material , alors j'importe un thème par défaut dans mon composant d'application comme ceci:
@Component( {
selector: 'my-app',
styles: [require('./app.component.css'), require('./material2-app-theme.scss')],
templateUrl: './app.component.html'
} )
Cependant, cela génère l'erreur suivante dans le navigateur au moment de l'exécution:
Uncaught Error: Expected 'styles' to be an array of strings.
J'ai essayé diverses configurations dans ma configuration de WebPack, et je vais actuellement avec ceci:
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: [helpers.root( 'src', 'styles' )]
}
Il y a une poignée de références à cette erreur sur le site Web, mais aucune d’entre elles ne résout mon problème. Une idée de comment réparer ça?
Vous ne faites que transmettre les fichiers css
, et non les scss
, à to-string-loader
, donc require ('./ material2-app-theme.scss') ne renvoie pas de chaîne.
Remplacez le chargeur scss
par ...
{
test: /\.scss$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
include: [helpers.root( 'src', 'styles' )]
}
Assurez-vous également que ./material2-app-theme.scss
est dans le dossier include
FYIVous pouvez facilement combiner ces deux chargeurs en un seul et simplement utiliser ...
{
test: /\.(css|scss)$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
}
Pour résoudre le problème, si vous utilisez ExtractTextPlugin
, le "webpack.config.js" est:
{
test: /\.(css|scss)$/,
loaders: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader?sourceMap', 'scss-loader?sourceMap']
})
}
Ensuite, je résous le problème avec:
{
test: /\.(css|scss)$/,
loaders: ['to-string-loader'].concat(ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader?sourceMap', 'scss-loader?sourceMap']
}))
}
C'est la configuration qui fonctionne pour moi pour charger des fichiers .css.
packages.json:
"devDependencies": {
.....
"to-string-loader": "^1.1.5",
"css-loader": "^0.28.11"
}
webpack.js:
module: {
rules: [
.....
{
test: /\.css$/,
loaders: ["to-string-loader", "css-loader"]
}
]
}
App.component:
@Component({
.....
styleUrls: ["./app.component.css"]
})
Vous pouvez également ajouter un chargeur en ligne au réseau de chargeurs, sans aucune installation supplémentaire.
loaders: ['exports-loader?module.exports.toString()', other-loader]