:::info 💡 总结放前面：
1.webpack默认不能处理.css文件，需要使用到css-loader来对.css文件进行转换为webpack可以解析的文件。
2.webpack对已经处理好的.css文件需要使用到style-loader把 CSS 插入到 DOM 中。
3.与.css文件相同，webpack也不能处理.less或者.scss文件，以.less文件举例，需要使用到less-loader来帮助webpack将.less文件转换为css内容，在交给css-loader和style-loader来处理并把 CSS 插入到 DOM 中。，其中在使用less-loader时，其内部使用到了less来将.less转换为.css，所以在使用less-loader时还需要下载less。 :::

css-loader及style-loader使用

:::success css-loader解析css文件，style-loader把 CSS 插入到 DOM。 :::

1.下载方式

  1. npm install css-loader style-loader --save-dev

2.配置方式

内链方式

  1. import 'style-loader!css-loader!./index.css'
  2. //loader名+!
  3. //注意写入顺序，加载顺序为从后往前，先css-loader解析在style-loader插入DOM

webpack.config.js配置方式

  1. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'index.js',
  7.     path: path.resolve(__dirname, 'dist'),
  8.   },
  9. + module: {
  10. +   rules: [
  11. +     {
  12. +       test: /\.css$/,
  13. +       use: ['style-loader','css-loader']
  14. +       //注意写入顺序，加载顺序为从后往前，先css-loader解析在style-loader插入DOM
  15. +     }
  16. +   ]
  17. + }
  18. };

3.打包

  1. npx webpack
  2. 或者
  3. npm run build //需要package.json配置

less-loader

:::tips less-loader用来转换less文件为css文件,其内部使用到了less。 :::

1.下载

  1. npm install less-loader less --save-dev

2.配置

  1. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'index.js',
  7.     path: path.resolve(__dirname, 'dist'),
  8.   },
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.css$/,
  13.         use: ['style-loader','css-loader']
  14.       },
  15. +     {
  16. +       test: /\.less$/,
  17. +       use: ['style-loader','css-loader','less-loader']
  18. +     }
  19.     ]
  20.   }
  21. };

3.打包

  1. npx webpack
  2. npm run build