編譯SASS用的WebPack 3

Question

我叫app.scss，我想編譯成一個名爲app.css CSS一個簡單的文件。

/web/static/stylesheets/app.scss 

Compiles to... 

/priv/static/css/app.css 

這是我的webpack.config。

常量路徑=需要（ 「路徑」）;

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的。

希望這會有所幫助。