Why My Scss Files Generated Also .js extension? ( scss > css and js)

[cengizilhan]

Hello !
i have a webpack case. everything is good except just one thing.

for example
/styles/rapid.scss

exports like:
/styles/rapid.css
/styles/rapid.js

i dont wanna js file for scss. there is any solution?

my webpack project: https://github.com/cengizilhan/webpack-test-2/

webpack common js
`const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const paths = require('./paths')
const glob = require('glob')
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')

// Find all .scss files
const scssFiles = glob.sync(paths.src + '/styles/**/*.scss', {
posix: true,
dotRelative: true
})

// Debugging: Log the found SCSS files
console.log('Found SCSS files:', scssFiles)

// Create an entry object for the SCSS files
const styleEntries = scssFiles.reduce((entries, filePath) => {
// Use the absolute path as the entry key
console.log('filePath', filePath)
console.log('entries', entries)
const entryKey = filePath
.replace('./Static/src/styles', './Static/styles')
.replace(/\/g, '/')
.replace('.scss', '')

entries[entryKey] = filePath
return entries

}, {})

// Debugging: Log the generated style entries
console.log('Generated style entries:', styleEntries)

const scriptEntries = {
'./Static/scripts/aile/sawa.aile-app.min':
paths.src + '/scripts/aile/sawa.aile-app.js',

}

const styleTest = {
'/Static/style/sawa': paths.src + '/styles/sawa.scss'
}

// Merge entries
console.log('styleentiries', styleEntries)
console.log('scriptEntries', scriptEntries)
const entries = {
...styleEntries,
...scriptEntries,
//...styleTest
}
console.log('style test', styleTest)
module.exports = {
// Where webpack looks to start building the bundle
entry: entries,

// Where webpack outputs the assets and bundles
output: {
	path: paths.build,
	//path: path.resolve(__dirname, 'dist'),
	filename: '[name].js',
	publicPath: '/'
},
/*

optimization: {
minimize: true,
minimizer: [new TerserPlugin({
parallel: true,
extractComments: false,
terserOptions: {
nameCache: {},
safari10: true,
ie8: true,
sourceMap: true,
compress: {
drop_console: true,
},
},
})],
},/
/
watch:true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/,
},
*/
// Customize the webpack build process
plugins: [
// Removes/cleans build folders and unused assets when rebuilding
new CleanWebpackPlugin(),

	// Copies files from target to destination folder
	new CopyWebpackPlugin({
		patterns: [
			{
				from: paths.images,
				to: paths.build + '/Static/images',
				globOptions: {
					ignore: ['*.DS_Store']
				},
				noErrorOnMissing: true
			},
			{
				from: paths.fonts,
				to: paths.build + '/Static/fonts',
				globOptions: {
					ignore: ['*.DS_Store']
				},
				noErrorOnMissing: true
			}
		]
	}),

	// Generates an HTML file from a template
	// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
	new HtmlWebpackPlugin({
		title: 'webpack Boilerplate',
		favicon: paths.src + '/images/favicon.png',
		template: paths.src + '/template.html', // template file
		filename: 'index.html' // output file
	})
],

// Determine how modules within the project are treated
module: {
	rules: [
		// JavaScript: Use Babel to transpile JavaScript files
		{ test: /\.js$/, use: ['babel-loader'] },
  
		// Images: Copy image files to build folder
		{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
  
		// Fonts and SVGs: Inline files
		{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
	  ],
},
externals: {
	jquery: 'jQuery'
},
resolve: {
	preferRelative: true,
	modules: [paths.src, 'node_modules'],
	extensions: ['.js', '.jsx', '.json'],
	alias: {
		'@': paths.src,
		assets: paths.build,
		jquery: path.resolve(__dirname, 'node_modules/jquery/src/jquery')
		//react: path.resolve(__dirname, 'Static/src/bower_components/react/react.js'),
	}
}

}`

webpack prod js

`const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const { merge } = require('webpack-merge')

const paths = require('./paths')
const common = require('./webpack.common')

module.exports = merge(common, {
mode: 'production',
devtool: false,
output: {
path: paths.build,
publicPath: '/',
filename: '[name].js',
},

module: {
rules: [
{
test: /.(sass|scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: false,
modules: false,
},
},
'postcss-loader',
'sass-loader',
],
},
],
},
plugins: [
// Extracts CSS into separate files
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
optimization: {
minimize: true,
minimizer: [new CssMinimizerPlugin(), '...'],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /.(sass|scss|css)$/,
//chunks: 'all',
enforce: true,
},
},
},
runtimeChunk: {
name: 'runtime',
},
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
})`

[alexander-akait]

We generate it to undestand that the CSS chunk is loaded, but we prepare the new built-in CSS support out f box withoout extra generation

[cengizilhan]

thank you. @alexander-akait

i found a solution by the way, if someone need: https://stackoverflow.com/questions/78609865/why-my-scss-files-generated-also-js-extension-scss-css-and-js