Webpack4(三) loader-css以及增加前缀

css-loader

(1) 安装 css-loader

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(2) 安装 style-loader, css-loader

cnpm i style-loader css-loader -D

sassloader

(1) 修改 webpack.config.js 配置

• 加入 sass-loader

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(2) 安装 sass-loader node-sass

cnpm i sass-loader node-sass -D

安装前缀比如 webpackit 之类的

(1)修改 webpack.config.js 前缀

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(2) 安装 postcss-loader 前缀

cnpm i postcss-loader -D

(3) 在根目录新建一个 postcss.config.js 文件

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