增加index.css文件
// index.css
.avatar{
width: 150px;
height: 150px;
}
index.js引用css文件
import avatar from './avatar.jpg'
import './index.css'
let img = new Image()
img.src = avatar
img.classList.add('avatar')
let root =document.getElementById('root')
root.append(img)
- 此时用webpack打包会异常,因为webpack不知道该如何处理css文件,因此需要style-loader和css-loader
npm install style-loader css-loader -D
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js", // 路径相对于webpack.config.js
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.css$/,
use: ['style-loader','css-loader']
}]
},
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
}
}
css-loader分析出几个css之间的关系并生成一段css
// avatar.css
.avatar{
width: 150px;
height: 150px;
}
// index.css
@import "avatar.css";
style-loader将css-loader生成的内容挂在到head部分
sass-loader 和 node-sass 处理scss 文件
npm install node-sass sass-loader -D
body{
.avatar{
width: 150px;
height: 150px;
}
}
- webpack.config.js中配置处理规则, loader执行顺序,从下到上,从右到左,依次使用sass-loader、css-loader、style-loader处理了scss文件
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
}
}
使用postcss-loader增加样式厂商前缀
npm install postcss-loader -D
- webpack.config.js增加loader
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
// 厂商前缀loader
'postcss-loader'
]
}]
},
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
}
}
npm install autoprefixer -D
module.exports = {
plugins: [
require('autoprefixer')
]
}
body{
.avatar{
width: 150px;
height: 150px;
transform: translate(100px,100px);
}
}
样式文件中引入其他样式文件
// index.scss
@import "other";
body{
.avatar{
width: 150px;
height: 150px;
transform: translate(100px,100px);
}
}
// other.scss
body {
.abc {
border: 1px solid red;
}
}
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
// 通过import引入的scss文件也要走前两个loader
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}]
},
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
}
}
css模块化
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
importLoaders: 2,
// css模块化
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
},
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
}
}
import avatar from './avatar.jpg'
import './index.scss'
export default function createAvatar() {
let img = new Image()
img.src = avatar
img.classList.add('avatar')
let root =document.getElementById('root')
root.append(img)
}
import createAvatar from './createAvatar'
import avatar from "./avatar.jpg";
import style from './index.scss'
createAvatar()
let img = new Image()
img.src = avatar
img.classList.add(style.avatar)
let root =document.getElementById('root')
root.append(img)
- index.js是通过
import style from './index.scss'
引用样式文件,并通过style.avatar
来使用,createAvatar.js是通过import './index.scss'
引用样式文件,并通过'avatar'
来使用
index.js中样式是生效的,createAvatar.js的则不生效
网友评论