时间戳

首页 > 解决方案 > 使用 WebPack 时不会创建来自 LESS 文件的 CSS 文件

webpack - 使用 WebPack 时不会创建来自 LESS 文件的 CSS 文件

问题描述

我有 2 个 LESS 文件：

**styles/consts.less**

    @gray: #202020;

**styles/main.less**

    @import 'consts.less';

    body { background-color: @gray; }

我尝试使用 Webpack 编译、缩小和捆绑 2 个更少的文件：

const webpack = require('webpack');

var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.min.css',
    })
  ],

  resolve: {
    extensions: ['.js'],
  },

  entry: {
    'scripts.min': './scripts/scripts.js',
  },  

  output: {
    path:  __dirname + '/dist',
    filename: '[name].js'
  },

  optimization: {
    minimizer: [
      new MiniCssExtractPlugin({}),
      new OptimizeCSSAssetsPlugin({}),      
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false
      })
    ]
  },

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

};

我希望将生成的文件 ,styles.min.css放在dist文件夹中。

javascript文件scripts.min.js已成功创建...

但是，LESS 文件中的 CSS 文件styles.min.css不是。

我究竟做错了什么？

标签： webpack

解决方案

你忘了把less文件导入你的js文件吗？

推荐阅读