您现在的位置:首页 >> 前端 >> 内容

webpack中与样式相关的loader

时间:2017/7/14 10:31:40 点击:

  核心提示:css-loader:该loader可以实现在js中以import/require的方式引入css。style-loader:该loader可以实现在html中以style的形式嵌入css。less-...

css-loader:该loader可以实现在js中以import/require的方式引入css。
style-loader:该loader可以实现在html中以style的形式嵌入css。
less-loader:该loader将less编译为css。
sass-loader:该loader将sass编译为css。
postcss-loader:该loader可以为我们样式添加浏览器兼容性前缀等。使用该loader仅仅在webpack.config.js中引入是没有用的,我们还需要在webpack.config.js同级目录下创建postcss.config.js,其内容如下:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

基于上述loader,配置如下:

    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    }

Tags:WE EB BP PA 
作者:网络 来源:一路斜阳的专栏