处理css, Less, Sass

安装

npm i css-loader style-loader -D
npm i less less-loader -D
npm i node-sass sass-loader -D

配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: "bundle.js"
  },
  mode: 'development',
  plugins: [
    // 配置 html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html', // 在内存中生成的文件名
      template: './src/index.html' // 模板，以磁盘上的这个文件为模板，不用引入 bundle.js
    })
  ],
  module: {
    rules: [ // 配置处理 css, less, sass, scss
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // loader 从右向左 执行
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.s(c|a)ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  // 配置 webpack-dev-server
  devServer: {
    open: true,
    compress: true,
    hot: true,
    port: 3000,
    contentBase: './src'
  }
}

处理 CSS

处理 css 文件，需要使用 css-loader 和 style-loader 包：

• css-loader：解析css 文件
• style-loader：将解析出的文件放入html，使其生效

安装

npm i css-loader style-loader -D

配置

在 webpack.config.js 文件修改如下：

module.exports = {
  //...
  // 配置 css loader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // loader 从右向左 执行
      }
    ]
  },
  //...
}

:::warning loader 配置后，是按从右向左的顺序执行。 :::

处理 Less

安装

npm i css-loader style-loader -D
npm i less less-loader -D

配置

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

处理 Sass

安装

npm i css-loader style-loader -D
npm i node-sass sass-loader -D

配置

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.s(c|a)ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}