引用第三方样式表
安装bootstrap模块
cnpm i bootstrap@3.3.7 -S
引用bootstrap模块
//如果引用的包安装到 node_modules目录中
//则可以省略 node_modules 这一层目录,直接以包名开始引入
import bootcss from 'bootstrap/dist/css/bootstrap.css'
配置处理webpack.config.js
字体文件的 loader
{
test:/\.ttf|woff|woff2|eot|svg$/,
use:'url-loader'
}
安装 url-loader
file-loader -D
cnpm i url-loader -D
cnpm i file-loader -D
引用样式类,属性带 -
不能 .
出来,需要使用 []
<button className={bootcss.btn, bootcss['btn-primary']}>按钮</button>}
使用less或者sass
以上写法由于模块化,使得样式类的引用比较复杂,不应对第三方样式表模块化
可规定
- 自定义样式表用
.scss
文件或者.less
文件,只对其进行模块化 - 第三方样式表均为
.css
文件,恰好可排除
安装处理sass或less的loader
cnpm i sass-loader node-sass -D
配置
//打包处理css的loader,不在模块化
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
//打包处理sass的loader
{
test: /.scss/,
use: ['style-loader',
'css-loader?modules&localIdentName=[paht]][name]-[local]-[hash]:5',
'sass-loader']
}
对样式表只导入即可
import cssObj from '@/css/commentList.scss' //自定义
import 'bootstrap/dist/css/bootstrap.css' //第三方
使用
<button className="btn btn-primary">按钮</button>