Compiling an scss file into a css file at a specific location

Question

I have the following folder structure:

|- webpack.config.js
|- src/
  |- main.js
  |- some.other.js.files
|- styles/
  |- app.scss
  |- animation.scss
  |- transition.scss
|- public/
  |- js/
    |- app.js

I have Webpack configured such that it takes all the css and js files and compiles them as app.js under public/js. Here is the config:

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.to.public.js,
    filename: 'app.js'
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
  }
}

Now I want to create another scss file, called static.scss, and instead of getting it added to app.js like the others, I want it to be compiled into a stand-alone css file under public/css. This is so that I can link to it from some html files I have elsewhere in the repository.

How do I do this?

José Quinto Zamora · Accepted Answer · 2017-05-19 08:44:39Z

1

You can extract specific targeted css using Extract Text WebPack Plugin: https://webpack.js.org/plugins/extract-text-webpack-plugin/

answered May 19, 2017 at 8:44

José Quinto Zamora

2,13815 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Compiling an scss file into a css file at a specific location

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related