使用 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

在我的例子中，仅适用于运行使用 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 */

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

Autoprefixer doesn't work in create-react-app while using sass

sass

reactjs

autoprefixer

create-react-app