Webpack sass to css specify a specific folder?

Question

I've been looking over the docs and checking other people's questions but I can't find the simple answer to how to compile all my sass down to a simple css file and specify the directory I want the resulting css file to output to.

For quick context: I have a public directory with a stylesheets directory and a build directory in it. webpack compiles the app into build, and I'd like to have the sass compile style.css into the stylesheets directory.

Here's a screenshot of my public directory:

public dir img

I'd like to be able to do something like this in my webpack.config.js (only showing pertinent code for brevity):

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

...

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

inside module loaders:

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

In plugins:

  plugins: [
    .
    .
    .
    cssOutput,
  ],

I'd like to be able to access the output file with this line in my index.html file located in the public directory:

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

I'm currently doing this using gulp and it works fine, I'm just trying to transition everything into webpack. Any help would be greatly appreciated!

Answer 1

Turns out you can just set the output file like this:

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

I made the noob mistake of forgetting to add:

require('_scss/style.scss');

in my index.jsx file.

For anyone who runs into this issue, I still had trouble with fonts and images, so inside module loaders in the webpack.config.js I had to add:

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

and since this output everything into my build directory, I just changed the css to output everything in the build directory as well to prevent path errors. I changed it to this:

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

Hopefully this helps someone else who runs into this type of issue!