详解webpack之scss和postcss-loader的配置
本文介绍了详解webpack之scss和postcss-loader的配置，分享给大家，具体如下：
开始
npm i sass-loader node-sass postcss-loader autoprefixer
首先配置postcss-loader
在这里postcss是为了来给浏览器内核添加私有前缀。当前postcss还有其他操作比如px2rem之类的。可以把postcss想象成babel-core只是一个控制中心，主要的还是它分散出来的插件。
/**** package.json ****/
// 指定你的前缀的兼容版本。
// 目前指定的只添加-webkit-, -ms-
// 你也可以兼容更低或者更高的的浏览器来增加或减少内核前缀的数量。
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
/**** .postcssrc.js ****/
// 增加一个.postcssrc.js来指定postcss所使用的插件。就跟.babelrc类似
module.exports = {
plugins:{
"autoprefixer": {}
}
}
/**** build.js生产环境 ****/
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
- use: 'css-loader'
+ use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
/**** dev.js开发环境 ****/
// 其实个人认为在开发环境可加可不加
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
scss的配置
无非就是增加规则
/**** build.js ****/
{
test: /\.scss$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
/**** dev.js ****/
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}
github
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍vue-cli中的webpack配置详解，包括了vue-cli中的webpack配置详解的使用技巧和注意事项，需要的朋友参考一下 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 webpack配置 主要对build目录下的webpack配置做详细分析 webpack.base.conf.js 入口文件en
-
本文向大家介绍Webpack的Loader和Plugin的区别，包括了Webpack的Loader和Plugin的区别的使用技巧和注意事项，需要的朋友参考一下 Loader 用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换
-
django-webpack-loader Read http://owaislone.org/blog/webpack-plus-reactjs-and-django/ for a detailed step by step guide on setting up webpack with django using this library. Use webpack to generate yo
-
本文向大家介绍详解webpack的配置文件entry与output，包括了详解webpack的配置文件entry与output的使用技巧和注意事项，需要的朋友参考一下 本文介绍了webpack的配置文件entry与output，分享给大家，具体如下： 在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组，会将数组里面的文件一起打包到bundle
-
本文向大家介绍详解webpack进阶之插件篇，包括了详解webpack进阶之插件篇的使用技巧和注意事项，需要的朋友参考一下 一、插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的：Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website，也就是说它是一个自动
-
在花了几天的时间之后，我把它抛出来寻求帮助。 和我的条目文件： 问题是网上的文档很少，因为他们正在重新做每件事。有人能帮我吗？我现在很困惑，不知道往上走哪条路。