why when put link css,scss in html give me error

Question

 <link rel="stylesheet" type="text/css" href="scss/styles.scss">
   <link rel="stylesheet" type="text/css" href="css/styles.css">


/*webpackconfig.js*/




var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry:  {
    app:'./src/index.js'
  },

  output: {
    path: path.join(__dirname, "/dist"),
    publicPath:'',
    filename: "main.js"
  },


  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
   // compress: true,
   writeToDisk: true,
   open:true,
   port: 58134,
  },
  module: {
    rules: [
      
      
      {//require("expose-loader?jquery!jquery"),
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      },

      { //  /\.css$/,
        test: /\.(sa|sc|c)ss$/,  
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath:'../'
            }
            
          },
          "css-loader",
        'sass-loader',
         
          /*{
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
              sassOptions: {
                fiber: false,
              },
            },
          },  */
        ],
    },

    {
      test: /\.(png|svg|jpe?g|gif)$/,
      use: [
        {
          loader: "file-loader", 
          options: {
            name: '[name].[ext]',
            outputPath: "images",
          }
        }
      ]
    },

    {
      test: /\.(svg|eot|woff|woff2|ttf)$/,
      use: [
        {
          loader: "file-loader", 
          options: {
            name: '[name].[ext]',
            outputPath: "fonts",
            esModule: false,
          }
        }
      ]
    },



      {
        test: /\.html$/,
        use:[
          {
        loader: 'html-loader',
        options: {
          minimize: true,
        },
      },
    ]
      },
  
      
     
    ],
},
    
   

  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html", 
      template: "./src/index.html",
    }),
    new HtmlWebpackPlugin({
      filename: "toursTourkey.html", 
      template: "./src/toursTourkey.html",
    }),
    new HtmlWebpackPlugin({
      filename: "toursEygpt.html", 
      template: "./src/toursEygpt.html",
    }),
  
    new HtmlWebpackPlugin({
      filename: "registeraccount.html", 
      template: "./src/registeraccount.html",
    }),
    new HtmlWebpackPlugin({
      filename: "registerinto.html", 
      template: "./src/registerinto.html",
    }),
    new MiniCssExtractPlugin({filename:"css/style.css"}),

    new OptimizeCssAssetsPlugin({}),
  ],
}; 
````````


````````


/*package.json*/
{
  "name": "saferny",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.3.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^1.4.0",
    "node-sass": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "popper.js": "^1.16.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@laylazi/bootstrap-rtl-scss": "^4.6.0-1",
    "bootstrap": "^4.6.0",
    "bootstrap-v4-rtl": "^4.6.0-2",
    "expose-loader": "^2.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "jquery.animate": "^1.8.9",
    "resolve-url-loader": "^3.1.3",
    "sass": "^1.32.12",
    "sass-loader": "^11.0.1"
  }
}

import './scss/styles.scss';
import './css/style.css';
//import '../node_modules/@laylazi/bootstrap-rtl-scss/scss/bootstrap-rtl.scss';
import 'bootstrap-v4-rtl/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min';
import 'bootstrap/dist/js/bootstrap.min.js';
import '@fortawesome/fontawesome-free/js/all.min';
import 'jquery.animate';
import 'jquery';

ERROR in Error: Child compilation failed: No template for dependency: CssDependency CodeGenerationError: No template for dependency: CssDependency

Compilation.js:2623 [safernyy]/[webpack]/lib/Compilation.js:2623:18
Cache.js:91 [safernyy]/[webpack]/lib/Cache.js:91:34
MemoryCachePlugin.js:45 Array. [safernyy]/[webpack]/lib/cache/MemoryCachePlugin.js:45:13
Cache.js:91 [safernyy]/[webpack]/lib/Cache.js:91:19
Cache.js:75 Cache.get [safernyy]/[webpack]/lib/Cache.js:75:18
CacheFacade.js:117 ItemCacheFacade.get [safernyy]/[webpack]/lib/CacheFacade.js:117:15
Compilation.js:2608 Compilation._codeGenerationModule [safernyy]/[webpack]/lib/Compilation.js:2608:9
Compilation.js:2534 [safernyy]/[webpack]/lib/Compilation.js:2534:10
async.js:3467 arrayIterator [safernyy]/[neo-async]/async.js:3467:9
No template for dependency: CssDependency
CodeGenerationError: No template for dependency: CssDependency
Compilation.js:2623 [safernyy]/[webpack]/lib/Compilation.js:2623:18
Cache.js:91 [safernyy]/[webpack]/lib/Cache.js:91:34
MemoryCachePlugin.js:45 Array. [safernyy]/[webpack]/lib/cache/MemoryCachePlugin.js:45:13
Cache.js:91 [safernyy]/[webpack]/lib/Cache.js:91:19
Cache.js:75 Cache.get [safernyy]/[webpack]/lib/Cache.js:75:18
CacheFacade.js:117 ItemCacheFacade.get [safernyy]/[webpack]/lib/CacheFacade.js:117:15
Compilation.js:2608 Compilation._codeGenerationModule [safernyy]/[webpack]/lib/Compilation.js:2608:9
Compilation.js:2534 [safernyy]/[webpack]/lib/Compilation.js:2534:10
async.js:3467 arrayIterator [safernyy]/[neo-async]/async.js:3467:9
child-compiler.js:169 [safernyy]/[html-webpack-plugin]/lib/child-compiler.js:169:18
Compiler.js:534 [safernyy]/[webpack]/lib/Compiler.js:534:11
Compiler.js:1087 [safernyy]/[webpack]/lib/Compiler.js:1087:17
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync] [safernyy]/[tapable]/lib/Hook.js:18:14
Compiler.js:1083 [safernyy]/[webpack]/lib/Compiler.js:1083:33
Compilation.js:2424 [safernyy]/[webpack]/lib/Compilation.js:2424:11
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync] [safernyy]/[tapable]/lib/Hook.js:18:14
Compilation.js:2417 [safernyy]/[webpack]/lib/Compilation.js:2417:38

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack 5.30.0 compiled with 7 errors in 5684 ms i ｢wdm｣: Failed to compile.

Did you ever find answer to this? I only have import css and I am also getting the same error. I am wondering if its a wrong dependency issue. — MG Developer
– MG Developer, Commented Aug 24, 2021 at 0:30

chkpnt · Accepted Answer · 2021-09-17 09:13:36Z

4

MiniCssExtractPlugin expects the CSS imported within the JavaScript file. If you have your stylesheets as links within the HTML, you need the (sadly unmaintained) extract-loader. It's important to use esModule: false, otherwise extract-loader fails.

            {
                test: /\.css$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].css",
                            outputPath: "css",
                            esModule: false,
                        }
                    },
                    {
                        loader: "extract-loader",
                    },
                    {
                        loader: "css-loader",
                        options: {
                            esModule: false,
                        }
                    }
                ]
            },

Works for me with [email protected], [email protected] and [email protected].

answered Sep 17, 2021 at 9:13

chkpnt

4174 silver badges14 bronze badges

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

2 Comments

tkarls Over a year ago

I didn't end up with the exaxt same config, But it got me in the right direction. I used "to-string-loader" and then the css-loader directly after.

Saifeddine M Over a year ago

@tkarls Could you please provide your config file. I'm using to-string-loader too and it's not working for me. Thanks in advance.

G.G · Accepted Answer · 2023-03-08 09:29:12Z

Could get rid of this error after updating Node to >=18. This is the webpack config:

{
            test: /\.(scss|css)$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                },
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                        modules: false,
                    },
                },
                {
                    loader: "postcss-loader",
                    options: {
                        postcssOptions: {
                            plugins: ["autoprefixer"],
                        },
                    },
                },
                { loader: "sass-loader", options: { sourceMap: true } },
            ],
        },

Collectives™ on Stack Overflow

why when put link css,scss in html give me error

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related