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

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

Issues with CSS z-index in negative values not functioning correctly

Help! I'm encountering a perplexing z-index issue on my website. Check out the problem here: Upon closer inspection of each step's header, you'll see that only step 3 features a ribbon while steps 1 and 2 do not (if this isn't visible, ...

csshtml

When attempting to input data into the database, an error is displayed stating that /test.php cannot be POSTed

Every time I try to input data using PHP, it throws an error Cannot POST /test.php. I've been attempting to fix it with no success. Can anyone please help me solve this issue? It's crucial for my project work. Here is my HTML code: <html> ...

javascriptphphtmlcss

Investigating the Hierarchy of CSS Selectors

I've been pondering this question: What exactly is the functional distinction between these two code snippets, if any? I'm not certain how the use of a comma impacts statements. Does the #page > have an influence on the link in the first example? ...

csscss-selectors

Tips for including multiple spaces within a cell of a table

I've come across an issue while working on a table and attempting to insert text with multiple spaces. For example, I want to add the text HELLO<1stSPACE><2ndSPACE>WORLD. However, when I enter it as HELLO WORLD, it only displays with a single s ...

htmlcsshtml-table

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

javascriptjqueryhtmlcsscheckbox

The navigation bar is not extending to fill the entire width of the screen

I recently created a navigation bar using the nav tag and applied CSS to set the width, border, and padding. However, I noticed that there are some empty pixels on each side of the navigation bar that I can't seem to fill up. Here is the HTML code for ...

htmlcss

Tap and conceal feature on a mobile website

I seem to be facing a JavaScript challenge. On the desktop version of my website, I've managed to create a functionality where hovering over a button reveals some text, and clicking anywhere else on the site hides the text. However, I'm now stru ...

javascriptjquerycss

Customized style sheets created from JSON data for individual elements

One of the elements in the API requires dynamic rendering, and its style is provided as follows: "elementStyle": { "Width": "100", "Height": "100", "ThemeSize": "M", "TopMargin": "0", " ...

javascriptcssangularjsdynamic-css

Utilize HTML5, CSS, and Responsive Web Design to place four boxes into a div container

Is there a way to arrange four boxes inside a div so that they are positioned at the corners of the top-left, top-right, bottom-left, and bottom-right? And when you click on the box in the middle, a window opens with text. I'm looking for something s ...

htmlcssresponsive-design

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

jqueryhtmlcss

Switching from a click event to a hover event in JavaScript

I've been experimenting with animating a burger bar on hover and came across an example online that I managed to adapt for mouseenter functionality. However, I'm struggling to make it revert back to the burger bar shape once the mouse leaves on m ...

javascriptjqueryhtmlcss

Animation using CSS that starts with a horizontal slide and transitions into a diagonal slide

Can I create an animation to move a graphic image on an html page from the middle of the screen to the top left corner? Here is what I have so far: #img1 {
 bottom: 50%;
 display: block;
 position: absolute;
 a ...

htmlcsscss-animations

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

I need to resize an image that measures 1024x1024 and is segmented into 4 quadrants: My goal is to reduce the size of this image so that quadrant 2 is 256x256 while masking out or hiding the remaining 3 quadrants, displaying only the desired section on th ...

javascriptjqueryhtmlcss

Altering the background color of an individual mat-card component in an Angular application

Here is the representation of my mat-card list in my Angular application: <div [ngClass]="verticalResultsBarStyle"> <div class="innerDiv"> <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginato ...

cssangulartypescriptfrontend

The scroll function triggers even upon the initial loading of the page

Trying to solve the challenge of creating a fullscreen slider similar to the one described in this question, I created a jsfiddle (currently on hold) Despite knowing that scrolling too fast causes bugs and that scrolling both ways has the same effect, m ...

javascriptjqueryhtmlcssevents

Struggling with eliminating the bottom margin on your website?

I can't figure out where this mysterious margin is coming from in the CSS - there's a consistent 30px of space at the bottom of each web page. Any assistance would be greatly appreciated. I know it's probably something simple, but my brain ...

htmlcss

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

javascriptphpjqueryhtmlcss

What causes child margins to extend beyond the boundaries of div elements?

Can anyone shed some light on the advantages of CSS behavior that allows a child element's top and bottom margins to extend beyond the boundaries of its block-parent? Check out this fiddle for a straightforward example. The pink div is influenced by ...

css

When the browser window is minimized, the top section of the website becomes concealed

For the past few weeks, I have been working on creating a new website. The progress is looking good overall, but there is one issue that I have encountered. When viewing my website in a browser window smaller than the actual webpage size, the top menubar ...

htmlcsshidemargincenter

Tips for setting uniform line-height across an entire project by adding a fixed value to the font size

I need to update line heights for a complete project. The requirement is that all line heights should equal the font size plus 4 pixels. Is there a simple way to do this using SCSS? Adjusting based on percentage would be easy, but the specific value is g ...

htmlcsssassfont-size