时间戳

首页 > 解决方案 > 为什么在html中放置链接css，scss时给我错误

javascript - 为什么在html中放置链接css，scss时给我错误

问题描述

 <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';

错误中的错误：子编译失败：没有依赖模板：CssDependency CodeGenerationError：没有依赖模板：CssDependency

子编译中的 2 个错误（使用 'stats.children: true' 和 '--stats-children' 了解更多详细信息） webpack 5.30.0 在 5684 毫秒内编译时出现 7 个错误 i ｢wdm｣：编译失败。

标签： javascripthtmlcssnode.jswebpack

解决方案

MiniCssExtractPlugin 需要在 JavaScript 文件中导入 CSS。如果您将样式表作为 HTML 中的链接，则需要 (遗憾的是未维护) extract-loader. 使用很重要esModule: false，否则extract-loader失败。

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

对我有用extract-loader@5.1.0，file-loader@6.2.0和webpack@5.53.0。

推荐阅读