DaveCodes DaveCodes - 1 year ago 142
Sass (Sass) Question

Webpack sass to css specify a specific folder?

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: [

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 Source

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:


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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download