Webpack + SASS + Autoprefixer 不生成 CSS 文件

Posted 2023-03-06

【中文标题】Webpack + SASS + Autoprefixer 不生成 CSS 文件

【英文标题】：Webpack + SASS + Autoprefixer are not generating the CSS file

【发布时间】：2019-12-08 01:04:31

【问题描述】：

我想用 webpack 将我的 SCSS 文件编译成 main.min.css。我正在使用 autoprefixer 并且没有生成最终文件。我尝试了很多选择，但现在我被卡住了。可能是什么？

基本上，我在 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 时没有显示错误，只是警告模式。

查看当前错误图片：

【问题讨论】：

但是要使自动前缀器工作，必须先安装它，我在 package.json 中看不到它:)

我不记得我在哪里读过，但 postcss-preset-env 应该已经有 autoprefixer，我只需要使用插件 require 和 ident。不是吗？

@GrzegorzT。我在那里添加但仍然无法正常工作。

【参考方案1】：

webpack.config.js - 听到指向示例的链接可能很有用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: ,
 ,
;

package.json 添加

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

.babelrc

  "presets": [
   [
    "@babel/preset-env",
    
      "useBuiltIns": "usage",
      "corejs": 3
    
   ]
 ]

【讨论】：

我忘了设置 SCSS 条目。然后我尝试了我的代码和你的代码，都返回 ModuleBuildError: ... @import ..... 知道如何解决吗？

如果你导入到模块 js -> 'import' ../scss/modules/_article.scss'; 或 webpack.config.js `entry: script: ['./sources/js/index.js', './sources/ scss/main.scss'], ,`

我用你的代码和我的代码试了一百次，总是在 SCSS 文件中的 node_modules @import 上返回错误。我更新了我的问题代码并插入了错误的打印屏幕。正如 webpack 文档所建议的那样，我已经尝试在 SCSS 文件的文件名之前添加 ~ ，但我没有成功。请帮帮我。

读取尚未更新，但可以正常使用：github.com/rafaelperozin/webpack-project-structure

非常感谢您的帮助。我克隆了存储库并运行了 yarn install。当我运行 npm run start 时显示错误：spawn cmd ENOENT 并且当我运行 npm run build 时显示 UglifyJs Unexpected token:keyword。知道可能是什么吗？