Front Tec

CSS相关

less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

sass

Sass 是成熟、稳定、强大的 CSS 扩展语言。

stylus

富于表现力、动态的、健壮的 CSS

style-loader

把编译后的css放到style标签里，然后插入到html中

建议

建议将style-loader与css-loader结合使用

webpack使用的是compose方式，所以loader的加载顺序是 从右到左

  • compose: require("style-loader!css-loader!sass-loader!./my-styles.sass")
  • pipe: require("./my-styles.sass!sass-loader!css-loader!style-loader")





 





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

css-loader

css-loader允许在js中能过import/require引入.css文件。

import home from 'home.css';

less-loader

less加载器，用于编译less到css











 





module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

sass-loader

sass加载器，用于编译sass到css











 





module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
    }]
  }
};

postcss

postcss

PostCSS是一个处理css的插件平台，可以在上面跑各种强大的插件。

创建postcss.config.js

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

postcss插件

  1. autoprefixer

为 CSS 中的属性添加浏览器特定的前缀

  1. cssnext

cssnext 插件允许开发人员在当前的项目中使用 CSS 将来版本中可能会加入的新特性。cssnext 负责把这些新特性转译成当前浏览器中可以使用的语法。 cssnext 中已经包含了对 Autoprefixer 的使用，因此使用了 cssnext 就不再需要使用 Autoprefixer。

  1. postcss-assets

插件用来处理图片和 SVG。在 CSS 声明中引用图片时，可以使用 resolve 加上图片路径的形式，如“resolve(‘logo.png’)”。

  1. cssnano

这个插件通过移除注释、空白、重复规则、过时的浏览器前缀以及做出其他的优化来工作，一般能减少至少 50% 的大小。还有很多其它选择，但 cssnano 是其中最好的一个。

  1. postcss-sprites

postcss-sprites 将扫描你CSS中使用的所有图像，自动生成优化的 Sprites 图像和 CSS Sprites 代码。

postcss-loader

postcss加载器






 





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

postcss-flexibility

postcss插件，flex语法浏览器兼容，PostCSS plugin for Flexibility polyfill














 









module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', 
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-flexibility')
              ]
            }
          }
        ],
      },
    ],
  },
};

postcss-flexbugs-fixes

postcss插件，修复flex不同写法可能产生的bug














 









module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', 
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-flexbugs-fixes')
              ]
            }
          }
        ],
      },
    ],
  },
};

postcss-preset-env

PostCSS Preset Env允许您将现代CSS转换为大多数浏览器都能理解的内容，根据目标浏览器或运行时环境确定所需的腻子脚本(polyfill)。














 
 
 
 
 
 









module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', 
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-preset-env')({
                  autoprefixer: {
                    flexbox: 'no-2009',
                  },
                  stage: 3,
                })
              ]
            }
          }
        ],
      },
    ],
  },
};

autoprefixer

用于给css属性加浏览器前缀

::-webkit-input-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

mini-css-extract-plugin

这个插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的随需应变加载。




 
 
 
 
 
 





















const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: '../'
            }
          },
          "css-loader"
        ]
      }
    ]
  }
}

optimize-css-assets-webpack-plugin

它将在webpack构建期间搜索CSS资源，并将优化\最小化CSS(默认情况下它使用cssnano，但可以指定定制的CSS处理器)。





 


// ...
const optimizeCss = require('optimize-css-assets-webpack-plugin');
// ...
plugins: [
  new optimizeCss()
]

isomorphic-style-loader

Webpack的CSS样式加载器，它的工作原理类似于样式加载器，但针对关键路径CSS呈现进行了优化，并且在同构应用程序的上下文中工作得非常好。 它为样式对象提供了两个辅助方法- . _insertcss()(将CSS注入DOM)和. _getcss()(返回CSS字符串)。

TIP

isomorphic: 同构的

module.exports = {
  /* ... */
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'isomorphic-style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      }
    ]
  }
  /* ... */
};

← 文件处理 →