webpack: is it possible to just compile SCSS into CSS?

Question

const path = require('path');

module.exports = {
  entry: './src/scss/screen.scss',

  output: {
    filename: 'screen.css',
    path: path.resolve(__dirname, 'dist'),
  },

  module: {
    rules: [
        {
          test: /\.scss$/,
          use: [
          'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
      {
        test: /\.jpg$/,
        use: [
          'file-loader',
        ],
      },
    ]
  }
};

This is my webpack.config.js. When I try to compile the SCSS into CSS it creates the screen.css file without any complaints, but the screen.css contains javascript code (from one of the loaders I guess).

Is it even possible to use webpack when the project doesn't really have any javascript file? I just have SCSS Files and Images.

Answer 1

You should build CSS files by [ExtractTextPlugin][1].

Btw, entry key is using only for js files. Webpack watch imports or requires from entry files and build them all in a single file (I could miss something)

You need to install extract-text-webpack-plugin and require it

var ExtractTextPlugin = require('extract-text-webpack-plugin')

Then update your loader

rules: [
  {
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: [{loader: 'css-loader'}, 
            {loader: 'sass-loader'}]
    })
  }

And plugins

plugins: [
    new ExtractTextPlugin({
        filename: 'styles.css'
    })
]

However, webpack require have some entry js file. You can just add next code, but don't use this JS file

entry: './app.js',

output: {
    path: join(__dirname, '/build'),
    filename: 'bundle.js'
}

And read more about [entries][2] [1]: https://github.com/webpack-contrib/extract-text-webpack-plugin [2]: https://webpack.js.org/concepts/entry-points/