（五）打包CSS、LESS、SASS

CSS

打包CSS，必须用到 style-loader 和 css-loader。安装命令行：npm install --save-dev style-loader css-loader。
添加一下内容：

module.exports = {
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: { 
        loader: 'url-loader',  // 打包图片需要file-loader插件
        options: {
          // placeholder 占位符
          name: '[name]_[hash].[ext]',
          // 打包后路径
          outputPath: 'images/',  
          limit: 2048  // 小于该值 则直接打包进文件 否则生成独立文件          
        }
      }, 
    }, {
      test: /\.css$/,
      /**
       * style-loader + css-loader
       * style-loader: 把文件挂在在head上
       * css-loader：处理css之间的链接关系
       */
      use: ['style-loader', 'css-loader'],  
    }]
  },
}

SASS

使用sass编译，必须要使用 sass-loader、node-sass，安装使用命令 npm install --save-dev sass-loader node-sass；修改以下配置：

module.exports = {
  module: {
    rules: [{
      test: /\.scss$/,
      /**
       * sass-loader  编译scss文件  因为浏览器不支持scss
       * 在webpack配置里面，loader 执行顺序： 从下到上，从右到左
       * 先执行sass-loader编译scss；翻译完给到css-loader，最后再执行style-loader挂在到head
       **/
      use: [
        'style-loader', 
        // 'css-loader', 
          {
          loader: 'css-loader', 
          options: {
            importLoaders: 2,   // 继续执行一下两个loader
            modules: true,      // 打开模块打包 不会其他模块冲突
          }
        },
        'sass-loader' 
      ],  
    },
    ...
    ]
  },
}

样式兼容性

统一给样式添加兼容性，在打包时自动添加浏览器前缀，例如：postcss-loader、autoprefixer。

字体文件

修改样式里面的链接路径，再修改以下配置（前提是已下载file-loader）：

module.exports = {
  module: {
    rules: [
      {
        {
          test: /\.(eot|ttf|svg)$/,
          use: { 
            loader: 'file-loader',  // 打包图片需要file-loader插件
          }, 
      }
    ]
  },
}

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下

CSS

SASS

样式兼容性

字体文件

标签

参与社区