Question

我正在尝试将我的较少编译成css，但在理解错误时遇到了一些麻烦。

我目前正在使用webpack 4.1.1。

我有以下webpack.config.js文件：

//Modules
const path = require('path');
const webpack = require('webpack'); //to access built-in plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractLess = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry: './src/assets/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    // webpack-dev-server config for refreshing and more
    devServer: {
        contentBase: './dist',
    },


    //In order to import a CSS file from within a JavaScript module
    module: {
        rules: [
            {
                test: /\.less$/,
                issuer: /\.less$/,
                include: [
                    path.resolve(__dirname, "less")
                ],
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                    {loader: "less-loader"}
                ]
            },

            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        extractLess
    ]
};

我得到的错误如下：

模块解析失败：意外字符'@'（1：0）您可能需要一个适当的加载器来处理这种文件类型。 | @图标，字体路径： “〜bootstrap3 /字体/”; | @import'~bootstrap3 / less / bootstrap';

我做错了什么？

Answer 1

您要加载的引导程序文件位于./node_modules目录中。但是在您较少的规则中，您将加载程序限制为./less 将其添加到include数组。

path.resolve(__dirname, "node_modules")

使用Webpack编译Less to Css

1 个答案: