Webpack 使用Web包时未加载scss文件

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

我的.scss文件未加载到网页包中，出现错误。我详细解释了一切

• 我的

  资产/css/application.scss

  文件夹中有application.scss文件

• 我已将其导入app.scss

  （assets/css/app.scss）

• 在app.js

  assets/js/app.js

• 下面是我的webpack.config.js

  assets/webpack.config.js

• 当我运行我的项目时，

  iex-S mix phx.server

  （我使用phoenix和Semantic作为UI）。下面是一个错误

• 请帮我解决这个问题，我已经尝试了从网上得到的所有可能的方法。你的解决方案可能对我有帮助。提前谢谢

---

首先，需要注意的是：当导入包含在node_模块包中的样式时，通常的做法是在包名前面加上波浪号：

@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文件，但它是由迷你css提取插件加载程序加载的

您的正则表达式试图用一个加载程序加载所有样式表扩展：

test://\（sa | sc | c | le）ss$/，

Sass和Less是不同的格式
如果要从
fomantic ui-less
库导入less文件，则必须指示网页如何加载
less
文件扩展名以及
less-loader
，而
sass-loader本身无法做到这一点

请尝试以下配置：

module.exports={
模块：{
规则：[
{
测试：/\.s[ac]ss$/i，
使用：[
MiniCssExtractPlugin.loader，
“css加载程序”，
'sass loader'，//将sass编译为CSS
],
},
{
测试：/\.减去$/,，
使用：[
MiniCssExtractPlugin.loader，
“css加载程序”，
“less loader”，//将less编译为CSS
],
},
{
测试：/\.css$/i，
用法：[MiniCssExtractPlugin.loader，'css-loader']，
}, 
]
},
插件：[
新的MinicsSextract插件({
//选项类似于webpackOptions.output中的相同选项
//这两个选项都是可选的
文件名：devMode？'[name].css':'[name].[contenthash].css'，
chunkFilename:devMode？'[id].css':'[id].[contenthash].css'，
}),
],
};

你可以在这里找到它们：

还有很多关于如何使用的例子，你应该看看

这里有一个关于插件的答案：

无论如何，最好一步一步地找出任何罪魁祸首，最重要的是，在网页包网站上有很多例子，对于每个插件，你都应该查看它们。
谢谢你的回复。如前所述修改了webpack.config。下面是一个错误。请检查一下这个>@import（multiple）.././theme.config'；^的第18行提供url或引用路径这就是我修改webpack.config.js文件的方式：
{test:/\.s[ac]ss$/I，使用：[{loader:MiniCssExtractPlugin.loader，选项：{hmr:process.env.NODE_env==='development'，reloadAll:true，}，'css loader'，'sass loader'，'postss loader'，]，sideEffects:true}，{test:/\.css$/i，使用：[MiniCssExtractPlugin.loader'，'css loader']，}
我已经编辑了答案，很抱歉，昨天我没有注意到外部文件的格式较低（标题是询问如何导入scss文件）。现在应该可以了。我已经按照您的指示修改了我的webpack.config.js文件。下面是一个错误。注意：Babel加载程序包含在文件中./node_modules/css-loader/dist/runtime/api.js（./node_-modules/css-loader/dist/cjs.js./node_-modules/less-loader/dist/runtime/api.js.）中出现错误。请参阅--8.。/node_-modules/css-loader/dist/runtime/api.js）“使用严格”；^/Users/Work/Code/icicle-2020/assets/node_modules/css loader/dist/runtime/api.js（第1行，第0列）@./node_modules/css loader/dist/runtime/api.js 2:26-98'中的输入无法识别，如果我打扰了您，很抱歉。我是新手。嗨，伙计，别担心，我们是来帮忙的。我很抱歉，但最后一次它是晚了，我上传了一个错误的配置！请原谅：-）现在我更新了答案，应该很容易理解。如您所见，Less/SASS文件是单独管理的，因为每种文件类型都需要它的加载程序。一旦转换成CSS，MiniCSS插件将把生成的样式提取到许多CSS文件中。请检查您的“应用程序”条目配置，它不应位于一个阵列中。如果仍然返回错误，请在github上共享您的项目，如果没有示例项目，您的配置将非常复杂。
@import "../node_modules/fomantic-ui-less/semantic.less";
@import "../node_modules/nprogress/nprogress.css";
@import "application.scss";


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"]
    },

  };
};

{
  "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"
  }
}

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:

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