CODEWITHSUNDEEP
javascripthtmlcssnode.jswebpack
elien
elien

Reputation: 11

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

 <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

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.

Upvotes: 1

Views: 4494

Answers (2)

G.G
G.G

Reputation: 36

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 } },
            ],
        },

Upvotes: 0

chkpnt
chkpnt

Reputation: 387

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].

Upvotes: 4

Related Questions