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？ 你可能需要它。