课件和源代码下载地址

精选留言(22)

• 
  嘉

  2019-06-04

  为什么后置处理器在lessloader前引入呢？不应该是最后呢
  

   2

   18
• 
  Andy

  2019-06-06

  请问你编译的时候，没有提示吗？
  Replace Autoprefixer browsers option to Browserslist config.
    Use browserslist key in package.json or .browserslistrc file.
  
    Using browsers option cause some error. Browserslist config
    can be used for Babel, Autoprefixer, postcss-normalize and other tools.
  
    If you really need to use option, rename it to overrideBrowserslist.
  
    Learn more at:
    https://github.com/browserslist/browserslist#readme
    https://twitter.com/browserslist
  

  展开

  作者回复: 最新的 autoprefixer 版本里面建议把 browserslist 写在 package.json 或者 . browserslistrc 文件里面去了（刚刚更新，😓）。
  
  不过你可以直接把browsers改成overrideBrowserslist也可以哈

  

   6
• 
  KaKa

  2019-07-02

  老师 我是主要以vue为主的开发人员··· 项目都是vue-cli3.0以上的 整个项目结构都改动很大，没有webpack的配置文件目录了。 只有一个vue.config.js文件··· 所以在vue-cli3.0以上的情况下 该如何配置呢？ 跪求解答 跪求回复···· = =

   4

   3
• 
  驴肉蒸饺

  2019-06-05

  摘自postcss/postcss-loader的github。
  After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.
  老师，您写的顺序是否是有问题的，可又未见有什么影响。请教老师。

  展开

  作者回复: postcss-loader 执行顺序必须保证在 css-loader 之前，建议还是放在 less或者 sass 等预处理器之后更好。即 loader 顺序：
  less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader
  
  其实 postcss-loader 放在 less-loader 之前问题也不大，平时使用的 less 里面的语法基本不会和 autoprefixer 处理产生冲突的。
  
  

  

   2
• 
  feidiy

  2019-10-24

  有单行注释代码的时候，需要把less loader放到后面，不然会报错的

  

   1
• 
  coder

  2019-07-23

  老师，有关于postcss-loader，有个疑问，为什么这个loader是个Object？这个loader里面的options怎么还会有个plugins？这个和webpack的plugins有啥关联吗？

  作者回复: 这个是通过loader的options传递postcss所需要用到的插件，这个插件是postcss生态下的。
  
  和webpack插件没有关联。

  

   1
• 
  gigot

  2019-07-08

  webpack-cli：3.3.3 版本会提示 TypeError: process.getuid is not a function，更新即可
  autoprefixer：
  1. 会提示 Replace Autoprefixer browsers option to Browserslist config.
    Use browserslist key in package.json or .browserslistrc file.
  将 browsers 参数换成 browserslist 放到 package.json 即可
  2. 提示 You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
  根目录创建 postcss.config.js 放 postcss-loader 的配置即可
  

  展开

  

   1
• 
  驴肉蒸饺

  2019-06-05

  同问关于postcss-loader的引入位置，为什么要写在less-loader的后面(即先执行postcss-loader)。请教老师。

  作者回复: postcss-loader 的执行顺序写在 css-loader 之前即可，也就是需要在 css-loader 将样式转换成 cjs 对象插入到 js 代码前。

  

   1
• 
  ivan

  2019-11-16

  老师好，我在按照教程使用的时候发现autoprefixer未生效，postcss-loader版本是3.0.0，错误提示：
  You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
  
  当我安装官网增加了postcss.config.js 后生效，想请问下原因，另外您觉得像这些帮助开发的工具是单独在项目根目录下写配置文件好还是在webpack配置里面写比较好？感觉写外面可扩展性比较强，之后再改的话直接修改外面的配置文件就可以了，但是会造成项目中根目录下配置文件很多，如babel/eslint/stylelint等等
  module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  }

  展开

  

  
• 
  凭实力写bug

  2019-11-08

  打脸,一打开全是支持,硬说还有好多不支持

  

  
• 
  刘先森

  2019-10-26

  有没有autoprefixer 的最佳实践配置？

  

  
• 
  风马

  2019-10-13

  老师 我这样写 没警告了 但是前缀还是没加上 谢谢老师
  
  loader: 'postcss-loader',
                          options: {
                              plugins: () => {
                                  require('autoprefixer')({
                                      overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
                                  })
                              }
                          }

  展开

  

  
• 
  Delete

  2019-09-29

  老师为什么我写了
  {
          test: /\.less$/,
          use: [
            // "style-loader",
            MiniCssExtractPlugin.loader, // 不将css文件插入到style中，直接抽离
            { loader: "css-loader" },
            {
              loader: "postcss-loader",
              options: {
                plugins: [require("autoprefixer")]
              }
            }, // 为了加属性前缀,一定要写在css-loader后面
            { loader: "less-loader" }
          ]
        },
  打包后为什么没有前缀呢？我都安装了postcss-loader以及autoprefixer

  展开

  作者回复: 把代码上传到guthub，然后贴个链接我看看。

   1

  
• 
  肖生克的救赎

  2019-09-20

  autoprefixer没生效 plugins写在postcss.config.js里面

  

  
• 
  开机密码******

  2019-09-05

  ERROR in ./app/component/download/download.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./node_modules/postcss-loader/src??ref--6-3!./app/component/download/download.scss)
      Module build failed (from ./node_modules/postcss-loader/src/index.js):
      SyntaxError
      
      (4:8) Unknown word
      
        2 |
        3 | .down {
      > 4 | // height:5.1rem;
          | ^
        5 | padding: 0 .8rem;
        6 | color: #fff;
      
  请问老师，autoprefixer 不能解析行内注释，这问题，应该怎么解。百度了大半天，都没找到解决办法！求解！

  展开

  

  
• 
  因为有你心存感激

  2019-09-05

  ERROR in ./src/search.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/Postcss-loader/src??ref--6-3!./src/search.less)
      Module build failed (from ./node_modules/Postcss-loader/src/index.js):
      BrowserslistError: Unknown browser query `ios7`. Maybe you are using old Browserslist or made typo in query.
          at unknownQuery (D:\webpack\my-project\node_modules\browserslist\index.js:201:10)
          at Function.select (D:\webpack\my-project\node_modules\browserslist\index.js:962:15)
          at D:\webpack\my-project\node_modules\browserslist\index.js:252:33
          at Array.reduce (<anonymous>)
          at resolve (D:\webpack\my-project\node_modules\browserslist\index.js:234:18)
          at browserslist (D:\webpack\my-project\node_modules\browserslist\index.js:353:16)
          at Browsers.parse (D:\webpack\my-project\node_modules\autoprefixer\lib\browsers.js:66:12)
          at new Browsers (D:\webpack\my-project\node_modules\autoprefixer\lib\browsers.js:48:26)
          at loadPrefixes (D:\webpack\my-project\node_modules\autoprefixer\lib\autoprefixer.js:101:20)
          at plugin (D:\webpack\my-project\node_modules\autoprefixer\lib\autoprefixer.js:112:20)
          at LazyResult.run (D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:295:14)
          at LazyResult.asyncTick (D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:208:26)
          at D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:250:14
          at new Promise (<anonymous>)
          at LazyResult.async (D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:246:23)
          at LazyResult.then (D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:127:17)
          at Promise.resolve.then.then (D:\webpack\my-project\node_modules\Postcss-loader\src\index.js:142:8)

  展开

  

  
• 
  coder

  2019-07-23

  关于autoprefixer的选项，我看官方文档，可以在postcss-preset-env里设置，是吗老师？
  
  postcss-preset-env includes autoprefixer, so adding it separately is not necessary if you already use the preset.
  
  
  来源：https://webpack.js.org/loaders/postcss-loader/#autoprefixing

  展开

  

  
• 
  流浪又怎样

  2019-07-01

  if (!e && fileOwnerId === process.getuid()) utimesSync(openCollectivePath, now, now);
  TypeError: process.getuid is not a function
  
  老师，我运行 npm run build 的时候会报以上错误，但是并不影响代码的打包构建，请问这是什么问题呢？

   1

  
• 
  Geek_5541c1

  2019-06-16

  增加了autoprefixer后，推荐使用在package.json中配置 browserslist 来配置或者在.browserslistrc 文件中配置browsers属性

  作者回复: 嗯嗯，是的，最新版本的 autoprefixer 有修改，不过也可以用 overrideBrowserslist，这样就不会有 warning 了。

  

  
• 
  vfv001

  2019-06-06

  autoprefixer官方还是建议用browserslist写在package.json里
  https://github.com/browserslist/browserslist#readme

  作者回复: 之前使用 browsers 的写法是ok的，新版本会有 warning 警告提升，可以换成 overrideBrowserslist 这样就不会有 warning 了。
  
  当然还是建议采用新版本的写法

  

  