我有迷你的css提取插件,可以从我的scss文件创建css文件,但是当我加载我的页面(ReactJs App)时,没有样式加载.我怀疑我在某种程度上搞乱了输出或导入的路径,但我try 了许多组合,但都没有成功……以前的内联样式加载器可以很好地使用导入路径. Webpack参赛作品:

entry: {    
        index: './src/index.js',
    },
    output: {
        filename: '[name].js'
    },

Webpack模块:

module: {
        rules: [
        {
        test: /\.(sass|less|css|scss)$/,
        sideEffects: true,
        use: [
          
           MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },          
        {
          test: /\.js?$/,
          exclude: /node_modules/,              
          loader: 'babel-loader',          
          options:{
            presets: ['@babel/preset-react']
          }
        }

    ],          
  },

Webpack插件:

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

MainListing.js(它是index.js内部的Reaction路由之一):

import './css/index.scss'

推荐答案

与迷你css-提取-插件,你需要使用html-webpack插件自动生成链接标签或创建带有链接标签的index.html文件.

如果您在webpack的输出中有任何CSS资源(例如,使用MiniCssExtractPlugin提取的CSS),则这些资源将与标签一起包含在生成的HTML元素中. https://webpack.js.org/plugins/html-webpack-plugin/#basic-usage

Webback团队说:请注意,如果您从webpack入口点导入CSS或在初始块中导入样式,则mini-css-extract-plugin不会将此CSS加载到页面中.请使用html-webpack-plugin自动生成链接标签或创建带有链接标签的index.html文件. https://webpack.js.org/plugins/mini-css-extract-plugin/

Javascript相关问答推荐

容器如何更改默认插槽中子项的显示?

我无法在NightWatch.js测试中获取完整的Chrome浏览器控制台日志(log)

类型自定义lazy Promise. all

从WooCommerce Checkout Country字段重新排序国家,保持国家同步

当运行d3示例代码时,没有显示任何内容

我们如何从一个行动中分派行动

空的结果抓取网站与Fetch和Cheerio

在react JS中映射数组对象的嵌套数据

为什么useState触发具有相同值的呈现

S文本内容和值不必要的不同

如何将多维数组插入到另一个多维数组中?

如何将未排序的元素追加到数组的末尾?

为什么这个.add.group({})在教程中运行得很好,但在我的游戏中就不行了?

从另一个数组中的对应行/键值对更新数组中的键值对对象

如何使用抽屉屏幕及其子屏幕/组件的上下文?

为什么NULL不能在构造函数的.Prototype中工作

AG-GRIDreact 显示布尔值而不是复选框

在高位图中显示每个y轴系列的多个值

使用Perl Selify::Remote::Driver执行Java脚本时出错

正则表达式以确定给定文本是否不只包含邮箱字符串