CODEWITHSUNDEEP
javascriptcsswebpack
Zed
Zed

Reputation: 177

SASS Styles are not being generated in webpack

For some reason, my link tag of saas styles is not being generated in the output file of the index.html. Although the script tag is generating.

My index.js

import '../sass/main.scss'

My Webpack.config.js:

const path = require('path');
var HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
      rules: [
          {
            test: /\.scss$/i,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                }, 
                'resolve-url-loader', 
                'sass-loader'
            ],
          },
          {
            test: /\.html$/i,
            use: ['html-loader'],
          },
          {
            test: /\.(png|jpe?g|gif|svg)$/i,
            use: [
              {
                loader: 'file-loader',
                options:{
                  name: "[name].[hash].[ext]",
                  outputPath: "img/",
                  publicPath: 'img/'
                }
              },
            ],
          },
        ],
    },
    plugins: [
        new HTMLWebpackPlugin({
          template: "./src/index.html"
        }),
        //new CleanWebpackPlugin()
      ],
};

package.json:

 "devDependencies": {
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  }

File structure:

enter image description here

There are no errors with this file structure.

I tried import './sass/main.scss' but getting an error of module not found.

Please any help would be appreciated.

Edit:

After changes, I am getting an error on img url:

ERROR in ./src/sass/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../data/img/back1.jpeg' in 'D:\github work\portfolio-webpack-html-css\src\sass'
    at finishWithoutResolve (D:\github work\portfolio-webpack-html-css\node_modules\enhanced-resolve\lib\Resolver.js:293:18)
    at D:\github work\portfolio-webpack-html-css\node_modules\enhanced-resolve\lib\Resolver.js:362:15
    at D:\github work\portfolio-webpack-html-css\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\github work\portfolio-webpack-html-css\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:\github work\portfolio-webpack-html-css\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\github work\portfolio-webpack-html-css\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at D:\github work\portfolio-webpack-html-css\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
    at D:\github work\portfolio-webpack-html-css\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\github work\portfolio-webpack-html-css\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:\github work\portfolio-webpack-html-css\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at processResult (D:\github work\portfolio-webpack-html-css\node_modules\webpack\lib\NormalModule.js:583:19)
    at D:\github work\portfolio-webpack-html-css\node_modules\webpack\lib\NormalModule.js:676:5
    at D:\github work\portfolio-webpack-html-css\node_modules\loader-runner\lib\LoaderRunner.js:397:11
    at D:\github work\portfolio-webpack-html-css\node_modules\loader-runner\lib\LoaderRunner.js:252:18
    at context.callback (D:\github work\portfolio-webpack-html-css\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (D:\github work\portfolio-webpack-html-css\node_modules\css-loader\dist\index.js:155:5)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ ./src/js/index.js 6:0-26

1 ERROR in child compilations
webpack 5.11.1 compiled with 2 errors and 1 warning in 1225 ms

The image is in the img folder and the file _header.scss is the one I am setting my image URL.

enter image description here

And this is how I am setting the img path:

background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(85,89,93,1) 100%),
                 url('../../data/img/back1.jpeg') no-repeat center;

Upvotes: 0

Views: 469

Answers (1)

tmhao2005
tmhao2005

Reputation: 17524

In case of keeping css as separate file, you need to use this package mini-css-extract-plugin.

You can ref to the link to know how to install and configure. Here is the basic thing you would need to add to your webpack.config.js:

// Keep in mind to install
// `npm i -D mini-css-extract-plugin`

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

{
  test: /\.scss$/i,
  use: [
      // 'style-loader', // stop using `style-loader`
      MiniCssExtractPlugin.loader,
      {
          loader: 'css-loader',
          options: {
              url: false
          } 
      }, 
      'resolve-url-loader', 
      'sass-loader'
  ],
},

// Add to your plugin as well
plugins: [
  new MiniCssExtractPlugin()
],

Update

Looks like the url path would relate with the index file where to import things main.scss instead so you have to change the path relative to the entry path. (The main file is transformed to css file then it would get passed to css loader then css-loader continues to process resolving url)

background: url('../data/img/back1.jpeg') no-repeat center; // change to `../`

Keep in mind, to still keep url option being enabled for css-loader & dont' have to use resolve-url-loader

Upvotes: 1

Related Questions