Webpack + SASS + Autoprefixer不会生成CSS文件 [英] Webpack + SASS + Autoprefixer are not generating the CSS file

问题描述

我想使用Webpack将SCSS文件编译为main.min.css 。我正在使用自动前缀，最终文件未生成。我尝试了很多选择，但现在陷入困境。可能是什么？

I would like to compile my SCSS files to main.min.css with webpack. I'm using autoprefixer and the final file is not being generated. I tried a lot of options and I'm stuck now. What could be?

基本上，我在root / src / styles / ... scss上开发，我需要转换并在root / css中创建一个缩小的文件

Basically, I'm developing on root/src/styles/...scss and I need to transpile and create a minified file in root/css with the name main.min.css.

我的package.json：

My 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

My 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 仅显示有关模式的警告，没有错误。

When run npm run build shows no error just warning about mode.

查看当前错误图片：

see the current error image:

推荐答案

webpack.config.js -听到链接一个示例可能会有用 ToDoList

webpack.config.js - hear a link to an example can be useful 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

Add a file to the root folder 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
    }
   ]
 ]
}

这篇关于Webpack + SASS + Autoprefixer不会生成CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！