autoprefixer in css

[versh23]

Hello. i try to use autoprefixer http://symfony.com/doc/current/frontend/encore/postcss.html

I have a main.scss which import css style

@import "style.css";

style.css

body
{
	display: flex;
	transition: all .5s;
	user-select: none;
	background: linear-gradient(to bottom, white, black);
}

but after build styles are not autoprefixed

if i include this style to main.scss - styles look like

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -webkit-linear-gradient(top, white, black);
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

webpack.config

    .addEntry('app', [
        './app/Resources/public/js/main.js'
    ])

main.js
import './../scss/app.scss';

[versh23]

with .addStyleEntry() css files work correct.

I think my problem is

@import 'style.css' in scss file.
sorry

[weaverryan]

Hmmm, this still sounds like a bug: you should be able to import CSS files and still have the autoprefixer applied. Or was there something else wrong also?

[versh23]

@weaverryan hello. thanks for answer. if i import CSS file in SCSS like

@import style.css

autoprefixer not worked

[grimpows]

same i tryed import scss in the addEntry to get a "all in one app.js" but look like only .addStyleEntry make style work with a dedicated css file outpout, look like css are skipped while import in .addEntry

[weaverryan]

Nice timing - I was just going to try to repeat this locally :).

[grimpows]

note : i didnt used autoprefixed, dunno what is it i'm less than a beginer is sass scss or css 👎 but i use import to get react-md font awesome and material-design in a app.scss, here is the scss who dont want be integered in the app.js with the addEntry :

// material design + font awesome + react md
@import '~material-design-icons/iconfont/material-icons';
@import '~font-awesome/scss/font-awesome';
@import '~react-md/src/scss/react-md';


$md-primary-color: $md-light-blue-500;
$md-secondary-color: $md-teal-a-100;

@include react-md-everything;

// Or for a subsection

.custom-theme {
  @include react-md-theme-everything($md-light-blue-500, $md-teal-a-100);
}

note that work with addStyleEntry

[weaverryan]

@grimpows can you show the code that doesn't work? And what exactly "doesn't work"? Are you getting an error? Or is the final CSS different than you'd expect?

@versh23 I actually can't repeat your error at all. Can you post your postcss.config.js? Mine looks like this:

module.exports = {
  plugins: {
    'autoprefixer': {},
  }
}

With this, I am seeing autoprefixing under all conditions: I tried adding code to a scss file that's loaded via addStyleEntry(), using @import from with a .scss file, and even importing it from a JS file.

Cheers!

[grimpows]

seem i dont get any error, just the css look like if he isnt here, i'll do an update and retry to put scss in the addEntry to check if that still not work, may update have change some things since last time i tryed

[weaverryan]

@grimpows if things don't work as expected, post as much of your config, js/css code and templates as possible and exactly what you're seeing :) - like "the css look like not used" I don't totally understand what this means.

Cheers!

[grimpows]

that mean i cant use font awesome icon like if i dont get the font awesome css ^^

[weaverryan]

Haha, @grimpows I still don't understand what you mean 😇 . Do you mean that when you try to use font awesome on your page (e.g. <span class="fa fa-star"></span>) that you simply don't see the icon? If so, can you show your webpack.config.js file, any relevant .js or .scss file and your template where you include your <script> and <link> tags

[grimpows]

there is my config who work

var path = require('path');
var Encore = require('@symfony/webpack-encore');

Encore
        // directory where all compiled assets will be stored
        .setOutputPath(path.join(__dirname, 'web/dist'))
        // Windows??? <---------------------------
        // .setManifestKeyPrefix()
        // what's the public path to this directory (relative to your project's document root dir)
        .setPublicPath('/dist')
        // empty the outputPath dir before each build
        .cleanupOutputBeforeBuild()
        // will output as web/build/app.js
        .addEntry('app', [
            'babel-polyfill',
            './src/ScriptsWeavers/ReactBundle/Resources/js/entryPoint.js'
        ])
        .addStyleEntry('css/main',[ 
            './src/ScriptsWeavers/ReactBundle/Resources/scss/app.scss' 
        ])
        // will output as web/build/app.css
        // allow sass/scss files to be processed
        .enableReactPreset()
        // allow legacy applications to use $/jQuery as a global variable
        .autoProvidejQuery()
        // create hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
        .enableSourceMaps(!Encore.isProduction())
        
        .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();

and there is the config who doesn't work

var path = require('path');
var Encore = require('@symfony/webpack-encore');

Encore
        // directory where all compiled assets will be stored
        .setOutputPath(path.join(__dirname, 'web/dist'))
        // Windows??? <---------------------------
        // .setManifestKeyPrefix()
        // what's the public path to this directory (relative to your project's document root dir)
        .setPublicPath('/dist')
        // empty the outputPath dir before each build
        .cleanupOutputBeforeBuild()
        // will output as web/build/app.js
        .addEntry('app', [
            'babel-polyfill',
            './src/ScriptsWeavers/ReactBundle/Resources/js/entryPoint.js',
            './src/ScriptsWeavers/ReactBundle/Resources/scss/app.scss' 
        ])
//        .addStyleEntry('css/main',[ 
//            './src/ScriptsWeavers/ReactBundle/Resources/scss/app.scss' 
//        ])
        // will output as web/build/app.css
        // allow sass/scss files to be processed
        .enableReactPreset()
        // allow legacy applications to use $/jQuery as a global variable
        .autoProvidejQuery()
        // create hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
        .enableSourceMaps(!Encore.isProduction())
        
        .enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();

no one css work on second

[weaverryan]

.addEntry('app', ['babel-polyfill', 'whatwg-fetch', './client/js/entryPoint.js', './client/sass/layout.scss'])

This will create an app.js file but also an app.css file - make sure you have the link tag for the app.css file in your layout.

without addStyleEntry i still get a main.css in outpout like if encore cached my old conf with .addStyleEntry('css/main', './client/sass/layout.scss') and really dont understand why --"

That also doesn't make sense to me. Just to be sure, manually deleted your entire web/build directory and then re-run webpack. Make sure it's not just "from before". The cleanupOutputBeforeBuild() should empty that directory automatically, but just in case it is not, delete it manually to see if the css/main.css` file goes away.