加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css-loader会跳过,而只会对内部资源做处理。css-loader处理之后,style-loader会将输出的css注入到打包文件中。css默认是inline模式,且实现了HMR接口。但inline不太适用于生产环境(全部输出在页面上)。还需要用extracttextplugin生成一个单独的css文件,但先一步一步来。

一,样式打包

1.安装css-loader,style-loader

npm install css-loader style-loader --save-dev

2.修改webpack.config.js

增加一个一级子节点

大学生就业培训,高中生培训,在职人员转行培训,企业团训

  module:{
       rules:[{
       test:/\.css$/,
       use: ['style-loader', 'css-loader'],
     }]
    },

大学生就业培训,高中生培训,在职人员转行培训,企业团训

test的正则会匹配.css的文件。use中的执行顺序是从右到左。loader的执行是连续的,就像管道一样,先到css-loader再到style-loader。loaders: ['style-loader', 'css-loader'] 可以理解为:styleloader(cssloader(input)) 。

网友评论