前端开发中常见的样式文件包括 css less sass（scss） 如果想用这三种类型的文件，需要在webpack配置文件中进行处理
配置样式需要安装
npm i css-loader style-loader -D配置less需要额外安装
npm i less less-loader -D配置scss需要额外安装
npm i node-sass sass-loader -D const { resolve } = require('path'); module.exports = { /** 输入 */ entry: './src/index.js', /** 输出 */ output: { filename: 'bundle.js', path: resolve(__dirname, 'bundle'), }, /** loader 配置 */ module: { rules: [ { /** 对所有以.css结尾的文件进行匹配 */ test: /\.css$/, /** use执行顺序， 从右往左，从下往上 */ use: [ /** 创建一个style标签, 将js中的css样式资源插入进去，添加到页面生效 */ // 'style-loader', /** 将css文件编程commonjs模块加载js中，里面内容是样式字符串 */ // 'css-loader', { loader: 'style-loader' }, { loader: 'css-loader', }, ], }, { /** 对所有以.less结尾的文件进行匹配 */ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }, { test: /\.scss/, //配置sass转css use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }, ], }, ], }, /** 插件配置 */ // plugins: [ // ], /** 模式开发模式 development 或者生产模式 production */ mode: 'development', };