web-dev-qa-db-fra.com

Erreur: les "styles" attendus doivent être un tableau de chaînes

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?

angularsasswebpack
7
serlingpa

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']
}
14
Charlie Martin

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']
    }))
}
13
riofly

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"]
})
0
Vedran

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]
0
B.Ma