web-dev-qa-db-fra.com

Puis-je construire sass / less / css dans le webpack sans les nécessiter dans mon JS?

J'ai actuellement des composants React & Sass qui sont en cours de construction avec Webpack avec succès. J'ai également un fichier sass principal qui se construit en CSS avec une tâche gulp.

Je voudrais seulement avoir à utiliser une de ces technologies, est-il possible de simplement compiler sass en css sans exigence associée au sass dans un fichier d'entrée?

Voici un exemple essayant d'utiliser WebpackExtractTextPlugin

webpack.config.js

entry_object[build_css + "style.css"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name]")
  ]

après avoir exécuté webpack, l'actif style.css ressemble à ceci:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

...
javascriptcssreactjssasswebpack
26
ex-zac-tly

J'ai résolu cela avec l'aide de @bebraw

Comme il l'a déclaré dans son commentaire, webpack créera un fichier javascript factice suivi du modèle dans votre fichier output.filename lors de l'utilisation d'ExtractTextPlugin. Parce que je définissais le fichier de sortie de ExtractTextPlugin exactement comme le nom dans le fichier output.filename, il ne sortait que le fichier javascript. En veillant à ce que le nom du nom de fichier de sortie et le nom de fichier de sortie ExtractTextPlugin soient différents, j'ai pu charger mon sass en CSS magnifiquement.

Voici le dernier exemple de webpack.config.js

entry_object[build_css + "style"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name].css")
  ]
5
ex-zac-tly