ember-cli-postcss 和 autoprefixer 毫无头绪答案

【问题标题】：Clueless with ember-cli-postcss and autoprefixerember-cli-postcss 和 autoprefixer 毫无头绪
【发布时间】：2018-11-09 17:13:53
【问题描述】：

我正在尝试使用 autoprefixer 进行 ember 构建。我遇到的问题是，通常输出到“assets/application-name.css”的内容现在输出到“app/styles/app.css”，我想将其输出到“assets/application-name.css” '。

我尝试添加 outputPaths 选项，但这似乎没有任何效果。

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var Funnel = require('broccoli-funnel');
var autoprefixer = require('autoprefixer');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    outputPaths: {
      app: {
        css: {
          'app': 'assets/application-name.css'
        }
      }
    },
    postcssOptions: {
      compile: {
        enabled: false
      },
      filter: {
        enabled: true,
        plugins: [
          {
            module: autoprefixer,
            options: {
              browsers: ['last 2 version']
            }
          }
        ]
      }
    }
  });
...

【问题讨论】：

您是否停止并重新启动了 ember 服务器？
我做了npm run build 并重新启动了应用程序。
你可能想试试github.com/kimroen/ember-cli-autoprefixer

标签： css ember.js ember-cli postcss autoprefixer

【解决方案1】：

我今天开始了一个项目，遇到了同样的问题。我很幸运地将 autoprefixer 插件的位置转移到 compile 步骤而不是过滤器步骤。

/* eslint-env node */
const EmberApp = require('ember-cli/lib/broccoli/ember-app'),
      autoprefixer = require('autoprefixer');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        enabled: true,
        plugins: [
          {
            module: autoprefixer,
            options: {
              browsers: ['last 2 version']
            }
          }
        ]
      },
      filter: {
        enabled: false,
      }
    }
  });
  return app.toTree();
};

如果版本对这个决议很重要：

ember-cli: 2.12.1

node: 6.10.2

ember-cli-postcss: 3.2.0

【讨论】：

【解决方案2】：

这对我有用：

outputPaths: {
  app: {
    css: {
      app: '/assets/custom-name.css'
    }
  }
},

获取app/styles/app.scss 并将其编译为dist/assets/custom-name.css。

您是否尝试在路径前添加/assets？

我的设置：

ember-cli: 3.5.0
node: 8.11.3
os: darwin x64

package.json:

"ember-cli": "~3.5.0",
"ember-cli-autoprefixer": "^0.8.1",
"ember-cli-sass": "^8.0.1",
"sass": "^1.14.3"

ember-cli-build.js：

module.exports = function(defaults) {
  const app = new EmberApp(defaults, {

    outputPaths: {
      app: {
        css: {
          app: '/assets/custom-name.css'
        }
      }
    },

    autoprefixer: {
      browsers: [
        '> 1%',
        'Explorer > 10',
        'Firefox >= 17',
        'Chrome >= 10',
        'Safari >= 6',
        'iOS >= 6'
      ],
      cascade: false,
      remove: false
    },

【讨论】：