使用 sass 时 Autoprefixer 在 create-react-app 中不起作用

Question

我正在使用 create-react-app 并且我正在使用“.scss”文件来设置应用程序的样式，并且根据文档，autoprefixer 应该会自动工作...... https://facebook.github.io/create-react-app/docs/post-processing-css

这是我的“index.scss”文件...

/* autoprefixer grid: on */
@import "./app/css/reset";
@import "./app/css/variables";
@import "./app/css/mixins";
@import "./app/css/global";
@import "./app/css/form";

它只是导入一堆其他“.scss”文件。

这是“index.js”文件...

import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import "./index.scss";
import App from "./App";
import { configureStore } from "./app/store/configureStore";


const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>,
    document.getElementById("root")
);

serviceWorker.unregister();

这是 package.json 文件中的 [browserslist] ...

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

我在这里做错了什么？每当我检查 CSS 时，我都看不到任何自动前缀发生。

Answer 1

您的浏览器列表设置非常现代。这意味着不再需要许多 css 前缀。尝试类似

"browserslist": [
    "since 2010" // support all browsers & versions released since 2010
]

你应该开始看到自动前缀开始了。

这是list of queries you can make。

Answer 2

就我而言，accepted answer 仅适用于使用yarn start 运行开发服务器。

Autoprefixer 没有为生产版本添加网格前缀，尽管 browserslist 中有 ie 11 并且 scss 文件中有注释 /* autoprefixer grid: autoplace */。

所以我必须在运行yarn run build时添加环境变量AUTOPREFIXER_GRID=autoplace。

我可以使用命令行让网格自动前缀工作：

AUTOPREFIXER_GRID=autoplace yarn run build

或

更新package.json:

"scripts": {
  "start": "react-scripts start",
  "build": "AUTOPREFIXER_GRID=autoplace react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

create-react-app 版本：3.4.1。

Answer 3

/* autoprefixer grid: autoplace */

不适用于 create-react-app 中的生产版本，因为它是 gets removed in compressed mode。

解决方案：

/*! autoprefixer grid: autoplace */