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/

Answer 2

The problem with your webpack.config file is that you gave it an scss file as entry point.

Webpack suppose to bundle js files, therefore you need to specify some js file, there you can import a scss file.