WebpackでSASSをコンパイルする3

Question

app.scssという簡単なファイルを用意しています。このファイルは、app.cssという名前のCSSにコンパイルします。

/web/static/stylesheets/app.scss 

Compiles to... 

/priv/static/css/app.css 

ここは私のwebpack.configです。

const path = require（ "path"）;

module.exports = [ 
    { 
    entry: "./web/static/js/app.js", 
    output: { 
     path: path.resolve(__dirname, "priv/static/js"), 
     filename: "app.js" 
    }, 
    resolve: { 
     modules: ["node_modules", __dirname + "/web/static/js"] 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader", 
      query: { 
      presets: ["env"] 
      } 
     } 
     ] 
    } 
    }, 
    { 
    entry: "./web/static/stylesheets/app.scss", 
    output: { 
     path: path.resolve(__dirname, "priv/static/css"), 
     filename: "app.css" 
    }, 
    resolve: { 
     modules: ["node_modules"] 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.scss$/, 
      exclude: /node_modules/, 
      use: [ 
      { 
       loader: "style-loader" 
      }, 
      { 
       loader: "css-loader" 
      }, 
      { 
       loader: "sass-loader" 
      } 
      ] 
     } 
     ] 
    } 
    } 
]; 

---

ファイルには、エラーなしでコンパイルしますが、app.css内のコンテンツが正しくありません。

/******/ (function(modules) { // webpackBootstrap 
/******/ // The module cache 
/******/ var installedModules = {}; 
/******/ 
/******/ // The require function 
/******/ function __webpack_require__(moduleId) { 
/******/ 
/******/  // Check if module is in cache 
/******/  if(installedModules[moduleId]) { 
/******/   return installedModules[moduleId].exports; 
/******/  } 
/******/  // Create a new module (and put it into the cache) 
/******/  var module = installedModules[moduleId] = { 
/******/   i: moduleId, 
/******/   l: false, 
/******/   exports: {} 
/******/  }; 
... and so on. 

---

私はWebPACKの設定ミスよどこ上の任意の提案？

Answer 1

ExtractTextPluginを使用し、そのパスのファイル名をExtractTextPluginの出力名とまったく同じにすると、同じ問題が発生します。

output: { 
    path: resolve("assets"), 
    filename: './css/[name].css', 
} 
plugins: [ 
    new ExtractTextPlugin('./css/[name].css', { 
    allChunks: true, 
    }), 
] 

私は最初のファイル名のCSS/[名前]をという名前の.css ExtractTextPluginセクションで、その後、.cssファイルでJSの作品であなたと同じ結果を得ました。

これが役に立ちます。