Lost in a sea of confusion with ember-cli-postcss and autoprefixer

I'm currently working on an ember build that incorporates autoprefixer. My issue arises from the fact that the output location for 'assets/application-name.css' has shifted from its normal path to 'app/styles/app.css', and I would like it to go back to 'assets/application-name.css'.

Even after attempting to include the outputPaths option, no changes seem to be taking effect.

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']
            }
          }
        ]
      }
    }
  });
...

Answer №1

Today, I kicked off a new project and came across a similar issue. Fortunately, I managed to resolve it by shifting the autoprefixer plugin from the filter step to the compile step.

/* 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();
};

If you need specific versions for troubleshooting:

ember-cli: 3.0.5

node: 8.11.4

ember-cli-postcss: 4.1.2

Answer №2

Here is a solution that has worked well for me:

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

This code snippet above takes the `app/styles/app.scss` file and compiles it into `dist/assets/custom-name.css`. If you encounter any issues, consider adding `/assets` to the path.


My current setup includes:

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

In my package.json file, I have the following dependencies:

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

And in my ember-cli-build.js file:

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
    },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the height of a DIV element to suit the window dimensions

I am facing an issue with the following HTML code: <div id="subpageHeaderImageSection"> <div id="subpageHeaderLeft"> <span id="holdImageP"></span> <!--[if lte IE 10]><img id="igm" src="theImages/sub ...

Changing the opacity on hover doesn't seem to be working

I currently have a simple dropdown menu where the different menu choices are supposed to change opacity when hovered over. The default opacity is set at 0.5. Below is the hover function in my jQuery code: $('#cat1 > li > a').hover(functio ...

Unchanging Dive Field

I'm having trouble understanding why this field isn't updating with the correct number. It seems that any value less than 1 is being rounded in the alert() function. I believe all numbers are simply getting rounded down, but I'm unsure of an ...

Organizing Pictures in a Gridded Design

My dilemma lies in displaying a set of thumbnail images within a div. The width of the div can vary depending on the screen size. Each image is fixed at 150px * 150px with a padding of 5px. I aim to arrange these thumbnails in a grid layout while ensuring ...

Transforming a Fixed Bootstrap Site into a Mobile-Friendly Design

I am facing an issue with my bootstrap website as it is not responsive to different view sizes. I would like to make it responsive but I am unsure of how to do so. Additionally, I am using LESS to modify the twitter bootstrap css. Currently, my site is str ...

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

Implement CSS to stack images upon zooming

On my menu page, I have two images that I want to display side by side in the web browser and stacked on top of each other in a column when viewed on mobile. Currently, with framework7's row and column classes, the images are positioned next to each o ...

Displaying dates on the Amcharts category axis for instances with empty data

I am currently creating a fruit consumption chart for each day, and so far everything is working correctly in the provided example. var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "hideCredits": true, "fixedColumnWidth": '10px& ...

Tips for avoiding word wrapping in text with white spaces

I am currently experiencing an issue with word-wrapping in my category names when there are two words separated by a space. Below is the CSS code snippet: .post-item .cat { height: 25px; display: inline-block; background: #CC0000; font-size: 11px; paddin ...

Conceal any child elements that are cut off as a result of the overflow hidden property

Despite the numerous questions on this topic, none provide a suitable answer. In this scenario, the overflow hidden property is applied to the parent div. The goal is to display only the child elements that are fully visible within this container. In the ...

When it comes to printing, the @media rule for portrait orientation will not be effective if landscape orientation is also indicated

My goal is to create a div that will occupy the entire A4 page when printing, regardless of whether portrait or landscape mode is selected in the print dialog window. test.html: <!DOCTYPE html> <html lang="en"> <head> <me ...

Is it possible to personalize a select button for both iOS and Android mobile platforms?

I've implemented a dropdown on my website for the desktop version and it works fine. However, I want to replace this dropdown with a select button on iPad and iPhone, as I prefer how it looks on those devices. Is it possible to style the select butto ...

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

I am currently in the process of developing a calculator using HTML, CSS, and JavaScript. However, I have encountered an issue with my code. After a user inputs a number and then clicks on an operator, the operator remains highlighted until the user inputs ...

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

Show or conceal advertisement based on user role

I have developed a custom Web Control that acts as a container for a mobile banner, but I want to hide it from users who are admins. So far, I've attempted the following: <mob:MobileBanner runat="server" ID="MobileBanner" Visible='<%# Not ...

Concealing specific DIV elements (unfortunately not nested)

Currently, I am dealing with pre-existing code that is automatically generated and needs to adhere to a specific format: <div id="TITLE1"></div> <div id="div-1"></div> <div id="div-2"></div> <div id="div-3"></d ...

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

I'm currently utilizing Cytoscape.js for rendering a dagre layout graph. When it comes to styling the node, I am using the property width: label in the code snippet below: const cy = cytoscape({ container: document.getElementById('cyGraph&apo ...

Styling on a device can vary from how it appears on a

Using Ionic2, I have an application with messages. In a browser, the message appears like this: https://i.stack.imgur.com/SyCtM.png However, when running on either an Android or iOS device, it looks different: https://i.stack.imgur.com/i0RdO.png The di ...