webpack構建——css的模組化
阿新 • • 發佈:2018-12-31
今天配置css模組化,一直出錯,最後發現原因是配置的問題。
首先,看下面:webpack.config.js :
{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { module: true, localIdentName: '[path]-[name]-[local]-[hash:base64:6]' } } ], exclude: [ path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'src/assets') ] },{ test: /\.css$/, use: ['style-loader','css-loader'],
exclude: [
path.resolve(__dirname, 'node_modules')]}這麼寫之後去模組化編寫css,可以一直報錯,也看不出是什麼原因,最後發現還是配置的問題,模組化的exclude不包括兩個,公共css裡面的處理只包含了一個模組,所以報錯了。css要全部處理,所以修改如下:
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
module: true,
localIdentName: '[path]-[name]-[local]-[hash:base64:6]'
}
}
],
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'src/assets')
]
},{
test: /\.css$/,
use: ['style-loader','css-loader'],
include : [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'src/assets')
]
}
npm start 成功打包!!!
css模組化:
建立並引入:
import SearchRoomStyle from './searchRoom.css';編寫:
.searchRoom { margin-top: 60px;}在js裡面呼叫:
className= {SearchRoomStyle.searchRoom}
<div className= { SearchRoomStyle.searchRoom還有Link,把路由當a標籤處理,簡單的幾個頁面就可以模組化了。
先把幾個頁面編寫出來,樣式調的漂亮些(靜態),這是本週的任務,下週開始進階,系統學習,包括資料處理。
2018.4.11 北京