Webpack sass到css指定一個特定的文件夾？

Question

我一直在查看文檔和檢查其他人的問題，但我找不到簡單的答案來如何編譯我所有的sass到一個簡單的css文件，並指定我想要的結果css文件輸出到目錄。

對於快速上下文： 我有一個公共目錄，其中包含stylesheets目錄和一個build目錄。 webpack將應用程序編譯爲內部版本，並且我希望sass將style.css編譯到樣式表目錄中。

這裏是我的公共目錄的截圖：

public dir img

我希望能夠做這樣的事情在我的webpack.config.js（只顯示爲簡潔中肯代碼）：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

...

// To be called in plugins: 
const cssOutput = new ExtractTextPlugin('./public/stylesheets/style.css'); 

內部模塊裝載機：

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'), 
    }, 

在插件：

plugins: [ 
    . 
    . 
    . 
    cssOutput, 
    ], 

我希望能夠與這條線在我的index.html文件位於公共目錄訪問輸出文件：

<link rel="stylesheet" href="/stylesheets/style.css" /> 

我目前正在使用gulp做這個，它工作正常，我只是想把所有東西都轉換成webpack。任何幫助將不勝感激！

Answer 1

原來你可以設置輸出文件是這樣的：

const cssOutput = new ExtractTextPlugin('../stylesheets/style.css', { allChunks: true }); 

我做不忘補充的小白錯誤：

require('_scss/style.scss'); 

在我index.jsx文件。

對於誰運行到這個問題的人，我仍然有字體和圖像的麻煩，所以在webpack.config.js模塊裝載機裏面我不得不添加：

{ 
    test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/, 
    loader: 'file', 
    }, 

而且由於這一切都輸出成我的build目錄，我只是改變了CSS來輸出build目錄中的所有內容，以防止路徑錯誤。我改成這樣：

const cssOutput = new ExtractTextPlugin('style.css', { allChunks: true }); 

希望這可以幫助別人遇到這種類型的問題！

Answer 2

你看看https://www.npmjs.com/package/extract-text-webpack-plugin？ 你可能需要它。