Question

我希望那边一切都好。我需要你的帮助。

我的.scss文件未加载到webpack中并显示错误。我会详细解释一切。

我的assets/css/application.scss文件夹中有application.scss文件。

.vertical.menu {
  display: flex;
  flex-direction: column;
}

.config.menu {
  margin-top: auto;
}

.site-page {
  font-size: 1.3em;
  line-height: 1.6em;
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-weight: 100 !important;
  background-color: $bgcolor;
}

我已将其导入app.scss (assets/css/app.scss)

@import "../node_modules/fomantic-ui-less/semantic.less";
@import "../node_modules/nprogress/nprogress.css";
@import "application.scss";

将此app.scss导入了app.js assets/js/app.js
下面是我的webpack.config.js assets/webpack.config.js


const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const autoprefixer = require("autoprefixer");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const globAll = require('glob-all');


module.exports = (env, options) => {
  const devMode = options.mode !== 'production';


  return {
    devtool: devMode ? 'source-map' : undefined,

    context: __dirname,

    entry: {
      app: [
        "js/app.js",
      ],
      dashboard: 'js/dashboard.js'
    },

    output: {
      path: path.resolve(__dirname, "../priv/static"),
      filename: devMode? 'js/[name].js' : 'js/[name].[hash].js',
    },

    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      }
    },

    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            output: {
              comments: false,
            },
          },
          cache: true,
          parallel: true,
          sourceMap: devMode
        }),
        new OptimizeCSSAssetsPlugin({}),
        new PurgecssPlugin({
          paths: globAll.sync([
            '../lib/**/templates/**/*.html.eex',
            '../lib/**/templates/**/*.html.leex',
            '../lib/**/views/**/*.ex',
            '../assets/js/**/*.js',
          ]),
         }),
      ]
    },

    plugins: [

      new CopyWebpackPlugin([{
        from: "./static",
        to: path.resolve(__dirname, "../priv/static")
      }]),

      new MiniCssExtractPlugin({
        filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
        chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
      }),

      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery",
        "window.$": "jquery"
      })
    ],

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.(sa|sc|c|le)ss$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: process.env.NODE_ENV === 'development',
                reloadAll: true,
              },
            },
            'css-loader',
            'sass-loader',
            'postcss-loader',
            'less-loader',
          ],
          sideEffects: true
        },
        {
          test: require.resolve('jquery'),
          use: [{
            loader: 'expose-loader',
            options: 'jQuery'
          },{
            loader: 'expose-loader',
            options: '$'
          }]
        },
        {
          test: /\.(jsx?)$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        },

        {
          test: /\.(gif|png|jpe?g)$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: 8000, // Convert images < 8kb to base64 strings
              name: 'images/[name].[ext]'
            }
          }]
        },

        {
          test: /\.(ttf|woff2?|eot|svg)$/,
          use: {
            loader: 'url-loader?limit=1024&name=/fonts/[name].[ext]'
          }
        },
      ]
    },

    resolve: {
      alias: {
        '../../theme.config$': path.join(__dirname, 'semantic_theme/theme.config'),
        'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery.min')
      },
      modules: ["node_modules", __dirname],
      extensions: [".js", ".json", ".jsx", ".css", ".styl", ".less", ".scss"]
    },

  };
};

下面是我的package.json assets/package.json

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "node_modules/.bin/webpack --mode production",
    "watch": "node_modules/.bin/webpack --watch --colors --mode development"
  },
  "dependencies": {
    "bootstrap-icons": "^1.0.0-alpha5",
    "child-replace-with-polyfill": "^1.0.1",
    "classlist-polyfill": "^1.2.0",
    "clipboard": "^2.0.4",
    "fomantic-ui-less": "^2.8.4",
    "formdata-polyfill": "^3.0.19",
    "jquery": "^3.3.1",
    "mdn-polyfills": "^5.19.0",
    "nprogress": "^0.2.0",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "semantic-ui-calendar": "^0.0.8",
    "url-search-params-polyfill": "^7.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "autoprefixer": "^9.7.1",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.6.1",
    "copy-webpack-plugin": "^5.0.5",
    "css-loader": "^3.2.0",
    "expose-loader": "^0.7.5",
    "file-loader": "^4.2.0",
    "glob-all": "^3.2.1",
    "image-webpack-loader": "^6.0.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.14.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss": "^7.0.21",
    "postcss-loader": "^3.0.0",
    "purgecss-webpack-plugin": "^2.2.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.0.0",
    "terser-webpack-plugin": "^3.0.0",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.1.0"
  },
  "optionalDependencies": {
    "fsevents": "^2.1.0"
  }
}

运行项目iex -S mix phx.server时（我将phoenix和Semantic用于UI）。遇到错误。

ERROR in ./css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):



@import "application.scss";
^
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):



$bgcolor: #0000FF;
^
Unrecognised input
      in /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/css/application.scss (line 3, column 0)
    at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
      in /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/css/app.scss (line 7, column 0)
    at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
 @ ./js/app.js 4:0-25
 @ multi js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/less-loader/dist/cjs.js!css/app.scss:

请帮助我，我已经尝试了从网上获得的所有可能方法。您的解决方案可能会对我有所帮助。预先感谢。

Answer 1

首先，要注意一点：导入node_modules包中包含的样式时，通常的做法是在包名称前加上波浪号：

@import "../node_modules/fomantic-ui-less/semantic.less";

成为：

@import "~fomantic-ui-less/semantic.less";

这将通知加载程序该文件来自node_modules文件夹，并且路径将自动形成。

现在，在谈论SASS / SCSS时，您的MiniCSSExtract插件似乎正在尝试读取您的scss文件，并且不应该发生这种情况。您可以通过查看错误来确定它：

ERROR in ./css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

这是一个scss文件，但已由mini-css-extract-plugin加载程序加载。

您的正则表达式正尝试使用单个加载器加载所有样式表扩展名：

test: /\.(sa|sc|c|le)ss$/,

Sass和Less是不同的格式！ 如果要从fomantic-ui-less库中导入较少的文件，则必须指导webpack如何使用less，less-loader来加载sass-loader文件扩展名本身不能做到这一点。

尝试以下配置：

module.exports = {

 module: {
 
  rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader', // compiles SASS to CSS
          ],
        },
        {
          test: /\.less$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader', // compiles Less to CSS
          ],
        },
        {
          test: /\.css$/i,
          use: [ MiniCssExtractPlugin.loader,'css-loader'],
        }, 
    ]
 },

plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[contenthash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[contenthash].css',
    }),
  ],
};

您可以在这里找到它们：sass-loader less-loader

还有许多有关如何使用MiniCssExtractPlugin的示例，您应该将其签出！

这里有关于插件的答案：Webpack 4 with Less and MiniCssExtractPlugin using entries

无论如何，最好一步一步地找到任何罪魁祸首，最重要的是，webpack网站上有很多示例，对于每个插件，您都应该检查一下。

使用webpack时无法加载scss文件

1 个答案: