Question

因此，我一直在努力将应用程序从gulp过渡到webpack，并且在加载样式较少时遇到了问题。我能够让Webpack使用MiniCssExtractPlugin和less-loader来加载样式；但是，似乎无法识别少用的@语法。

我的webpack.config.js

    module: {
        rules : [
          // Less Files
          {
            test: /\.less$/,
            use: [
                devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                "css-loader",
                "less-loader",
              ],
          }
        ]
      },

    plugins: [
        new MiniCssExtractPlugin({
          filename: '[name].css',
          chunkFilename: "[id].css"
        }),

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


          &.messaging > a > .icon-container {
            background: url("/images/app/@{appname}/ic_home_messaging@3x.png") no-repeat;
                          ^
Variable @appname is undefined
      in /Users/brandentenbrink/MedData/Professional/ProfessionalApp/src/src/less/main.less (line 272, column 28)
 @ ./src/less/styles.less 2:14-125
 @ ./src/index.js

这是我看到的错误。起初我以为是因为没有定义@appname。但是，将所有这些值更改为正确的硬编码名称后，更多文件开始出错-这次使用简单的CSS（找不到@ blue）。

我不太了解webpack，甚至更少；因此，我正在寻找关于为什么我的@导入和引用无法在webpack中构建的任何解释。

谢谢。

使用Webpack 4加载较少的语法时出现问题

0 个答案: