记一次webpack配置css踩的坑

webpack配置css文件

因为我安装的webpack版本是3.6.0，node版本是15.xx ，npm版本7.x

当我安装 css-loader的时候，这时候它报了一个错：

E:\WEB_programs_C_programs\WEB_programs\vue\1\65.webpack的使用\3webpack的loader>npm install --save-dev css-loader
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: meetwebpack@1.0.0
npm ERR! Found: webpack@3.12.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^3.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.27.0 || ^5.0.0" from css-loader@5.2.0
npm ERR! node_modules/css-loader
npm ERR!   dev css-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\admin颜云\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\admin颜云\AppData\Local\npm-cache\_logs\2021-03-30T10_25_10_058Z-debug.log

大概的意思是我npm版本高了。我试着把我的npm版本降低到 3.xxx。：

但是当我检查的时候它没有降低到那个版本。

转折点：

我把webpack升级到了4.xxxx，好在当时webpack3.xx的配置很简陋，升级过后并不需要额外的配置了，只需在安装一下webpack-cli。

再次打包，没有错误。

然后下载 css-loader 和style-loader,按照官网的实例在webpack.congif.js进行配置。

写好css，入口文件引入css。再次打包，问题就解决了。配置文件如下：

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    // path.resolve() 方法会将路径或路径片段的序列解析为绝对路径。
    // path.join() 方法会将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符），然后规范化生成的路径。
    path: path.resolve(__dirname, 'dist'),
    filename:'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}