Webpack + SASS + Autoprefixer 未生成 CSS 文件

2024-01-01

我想将我的 SCSS 文件编译为 main.min.css与网页包。我正在使用自动前缀器和最终文件未生成。我尝试了很多选择,但现在陷入困境。可能是什么?

基本上,我正在 root/src/styles/...scss 上进行开发,我需要在 root/css 中转译并创建一个名为 main.min.css 的缩小文件。

我的package.json:

{
  "name": "rms",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --output-public-path=/js/new-theme/"
  },
  "keywords": [],
  "author": "Rafael Perozin",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@material/tab-bar": "^3.1.0",
    "@material/tab-scroller": "^3.1.0",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "core-js": "^3.1.4",
    "css-loader": "^3.1.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "postcss-cli": "^6.1.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5"
  },
  "browserslist": [
    "last 2 versions",
    "ie >= 8",
    "edge >= 15",
    "ie_mob >= 10",
    "ff >= 45",
    "chrome >= 45",
    "safari >= 5",
    "opera >= 23",
    "ios >= 7",
    "android >= 4",
    "bb >= 10"
  ]
}

我的 webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.min.css'
        }),
    ],
    entry: {
        script: './src/scripts/main.js',
        style: './src/styles/main.scss'
    },
    output: {
        path: path.resolve(__dirname, './js/new-theme'),
        filename: 'main.min.js',
        publicPath: './js/new-theme'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            [
                                '@babel/preset-env',
                                    {
                                        "targets": {
                                            "browsers": [
                                                "last 2 versions",
                                                "chrome >= 71",
                                                "ie >= 11",
                                                "ios >= 8",
                                                "android >= 5",
                                                "safari >= 10",
                                                "firefox >= 61"
                                            ]
                                        },
                                        "useBuiltIns": "usage",
                                        "corejs": 3
                                    }
                                ]
                        ],
                        "plugins": [
                            ["@babel/transform-runtime"]
                        ]
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            path: path.resolve(__dirname, './css/new-theme'),
                            publicPath: './css/new-theme'
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            import: true,
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {}
                    }
                ]
            }
        ]
    }
}

运行时npm run build显示没有错误,只是警告有关模式。

see the current error image: enter image description here


webpack.config.js- 听到示例链接可能很有用ToDoList https://github.com/tomik23/ToDoList

js

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
  },
},

css/sass

 {
    // CSS SASS SCSS
    test: /\.(css|sass|scss)$/,
    use: [
      argv.mode === 'development'
        ? 'style-loader'
        : MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2,
          sourceMap: true,
        },
      },
      {
        loader: 'postcss-loader'
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
 },

添加文件到根文件夹postcss.config.js

module.exports = {
  plugins: {
   autoprefixer: {},
 },
};

包.json add

"browserslist": [
  "> 1%",
  "last 1 version",
  "not dead"
]

.babelrc

{
  "presets": [
   [
    "@babel/preset-env",
    {
      "useBuiltIns": "usage",
      "corejs": 3
    }
   ]
 ]
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Webpack + SASS + Autoprefixer 未生成 CSS 文件 的相关文章

  • 引发一系列事件 Backbone event:name

    extend object Backbone Events object on myalert one function msg document body innerHTML eve1 msg msg name this name con
  • 在 Nodejs/javascript 中的 Excel 中创建动态数量的列或标题

    我用过exceljsNodejs中用于将json数据导出到excel的模块 它工作正常 但必须在添加行之前预定义标题 列的名称 即列是固定的 添加行后 我无法动态添加列 我尝试了许多通过 npm 提供的模块 但它们都具有相同的功能 那么 有
  • 如何清除画布元素中的多边形区域?

    我使用过clearRect函数 但没有看到多边形的等效函数 我天真地尝试过 ctx fillStyle transparent ctx beginPath ctx moveTo 0 0 ctx lineTo 100 50 ctx lineT
  • 如何在html中创建字体选择栏

    我想创建一个下拉菜单 在其中我们可以看到所有可用的字体 并且可以选择我们选择的任何字体 我还想创建一个字体颜色选择小部件 存在大量的字体样式 我想知道如何获取所有这些字体以及如何创建一个小部件 用户可以使用该小部件选择他选择的颜色 为了创建
  • 代理递归函数

    想象一个简单的递归函数 我们试图包装它以检测输入和输出 A simple recursive function const count n gt n 1 count n 1 Wrap a function in a proxy to ins
  • 用于匹配重复子字符串的单个js正则表达式?

    假设我有一个字符串 例如 where is mummy where is daddy 我想用空字符串替换任何一组重复子字符串 所以在这种情况下where and is元素将被删除 结果字符串将是 mummy daddy 我想知道是否有任何单
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • 我可以阻止history.popstate在初始页面加载时触发吗?

    我正在开发一个通过 AJAX 提供内容的网站 如果您单击菜单中的某个项目 内容 div 会更新为 get回应 没什么花哨的 我正在实施history pushState允许使用浏览器的后退 前进按钮进行导航 我有以下内容可以在历史导航上加载
  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan
  • Javascript for 循环跳过最后一个元素

    我有一个数组 根据某些条件从中删除某些元素 当我删除元素时 我会重新启动 for 循环 因为索引已刷新 var k for k 0 k lt this j data length k if condition true this j dat
  • Angular2,测试和解析数据:如何测试 ngOnInit?

    我正在通过Angular2 测试指南 https angular io docs ts latest guide testing html并希望编写一个测试ngOnInit 功能 那个来自编程指南的路由部分 https angular io
  • JavaScript 检查时区名称是否有效

    有没有一种方法可以在不使用外部库的情况下检查 JavaScript 中的时区名称是否有效 当用户在文本字段中输入时区名称时 我想验证时区是否有效 我知道我们可以使用时刻时区库轻松做到这一点 但我不想使用任何额外的库 我正在寻找纯 JavaS
  • 扩展html表格突出显示行和列并使当前单元格具有不同的颜色

    我找到了用鼠标悬停时突出显示行和列的示例 https stackoverflow com a 28312853 139698 https stackoverflow com a 28312853 139698 如何使鼠标悬停的一个单元格变为
  • 处理照片上传的最佳方式是什么?

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我
  • Javascript For 循环在 dom 元素上执行[重复]

    这个问题在这里已经有答案了 我有 javascript 代码来获取具有类名称的元素 并迭代从元素中删除该类 var elements document getElementsByClassName test console log Leng
  • D3.js - 更改鼠标悬停时元素的不透明度 IF 条件 = false

    我正在制作一个带有过滤器的交互式 D3 js 图表 当用户单击选定的复选框时 该过滤器会显示点 此外 在鼠标悬停事件上 所选点旁边将出现一个弹出窗口 其中包含一些信息 由于图表上的点数量相对较多 因此我选择在取消选中相应复选框时使相关点变得
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • CSS精灵什么时候适合使用,什么时候不适合使用?

    CSS精灵在什么情况下适合使用 什么时候不适合使用 是节省时间还是仅节省服务器请求 我认为带宽使用将是相同的 因为图像与大图像相同 但它是在一个部分中 何时何地使用 css sprite 是节省时间 工作中 的选择 对于导航来说 它有利于翻
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

随机推荐