Question

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

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

Point

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

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

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

这是package.json文件中的[浏览器列表] ...

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();

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

Answer 1

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

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

，您应该开始看到自动添加前缀功能。

这里是list of queries you can make。

Answer 2

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

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

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

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

AUTOPREFIXER_GRID=autoplace yarn run build

OR

更新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 */

自gets removed in compressed mode起，不适用于create-react-app中的生产版本。

解决方案：

/*! autoprefixer grid: autoplace */

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

3 个答案: