1.使用import语法倒入css样式表
import './css/index.css'
报错,webpack默认只能打包js处理文件比如import $ from 'jquery',所以css无法处理
解决方法:需要一个合适loader,第三方loader加载器。
2.css文件,需要安装
npm i style-loader css-loader -D
3.打开webpack.config.js文件新增一个配置结点
module: { // 这个节点,用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方loader 规则
]
}
less,scss同理:
main.js里面import:
import $ from 'jquery'
// const $ = require('jquery')
// 使用 import 语法,导入 CSS样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
config匹配规则:
module: { // 这个节点,用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
]
}
命令行:
sudo npm i less-loader -D
sudo npm i less -D
sudo npm i sass-loader -D
sudo cnpm i node-sass -D(这一条一定要用cnpm)
cnpm安装方法:sudo npm install -g cnpm --registry=https://registry.npm.taobao.org