Vue-cli: vue cli 3 does not load postcss.config.js or .postcssrc.js

[twocngdagz]

Version

3.0.0-alpha.13

Reproduction link

https://github.com/twocngdagz/vue-tailwind-select

Steps to reproduce

I added a postcss.config.js or postcssrc.js for postcss to load tailwindcss

module.exports = {
plugins: [
require("postcss-import")(),
require("tailwindcss")("./tailwind-config.js"),
require("autoprefixer")(),
]
};

What is expected?

it should process the

@tailwind preflight;

@tailwind utilities;

What is actually happening?

when running vue build src/main.js

style output

app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}h3[data-v-2ebf6f26]{margin:40px 0 0}ul[data-v-2ebf6f26]{list-style-type:none;padding:0}li[data-v-2ebf6f26]{display:inline-block;margin:0 10px}a[data-v-2ebf6f26]{color:#42b983}@tailwind preflight;@tailwind utilities;

[yyx990803]

You are placing the directive in the wrong place: https://github.com/twocngdagz/vue-tailwind-select/blob/master/src/App.vue#L23

It should be inside <style> blocks.

[Christoph-Harms]

To anyone having the same issue despite having placed the directives in the correct place: vue-cli 3 does not pick up on the .postcssrc.js or the postcss.config.js, since it uses the package.json to configure postCSS.

This article helped me solve the problem.

[davidohlin]

@Christoph-Harms I can't get it to work, following the article. Do you happen to have a working example?

[adrian-fjellberg]

If anyone else has this problem you might be interested in my solution to the problem.

The postcss.config.js was not loading at all (tried putting error code in there, but no failures/warnings). What was happening was that Webpack was never really loading the config file because I was not using any .postcss files in my project, only .scss files. I was expecting the postcss-loader to be used as part of the .scss rule in the Webpack-config, but it is not set up this way by default in Webpack 2 and 3.

The solution was then to add the postcss-loader to the .scss rule in the Webpack config files. As the loaders are generated by a function called generateLoaders in the utils.js file, I had to change some of that generating-code to make it work. After making the changes I made sure that when generating the scss loaders I added in the postcss-loader.

This is how my build/utils.js file looks like:
https://gist.github.com/adrian-fjellberg/5e2243cf6b99cf47b02051446dd16e6e

[Akryum]

@adrian-fjellberg Postcss is supported out-of-the-box in vue-cli 3.

[adrian-fjellberg]

@Akryum Aha. Of course, it's not correct of me to say:

it is not set up this way by default in Webpack 2 and 3

What I should say is that my problem was related to back when vue-cli used a build directory to configure Webpack. I don't know when vue-cli stopped configuring Webpack that way and added postcss-loader to the .scss rule by default. Sorry for the confusion, I was up all night to get this to work on an older application and wanted to share my solution when I finally got it working.

[Akryum]

I don't know when vue-cli stopped configuring Webpack that way and added postcss-loader to the .scss rule by default.

Since version 3.0

[LinusBorg]

At the core, this has more to do with vue-loader than vue-cli. Since vue-loader 15, postcss is not applied automatically to all <style> tags anymore, since vue-loader now just uses the other webpack rules defined for *.css files, *.scss files etc.

[imcvampire]

Hi @LinusBorg, can you provide a small example to apply postcss to all style tags?

[LinusBorg]

Oh your misunderstanding.

Vue-cli 3 is configured to apply postcss to all style tags. I was me rely stating that this is now done explicitly by adding postcss to the rule that is applied to the styles, not implicitly by vue-loader internally.

[lovetingyuan]

postcss-loader does not load any config file like postcss.config.js or .postcssrc when it's options has some useful fields like plugins.

[equinusocio]

I can't make postcss work with a vue-cli 3 generated project. I just followed the wizard and chosed to use separated configuration files. After configured the postcss.config.js file it should works. Intead postcss plugins aren't loaded inside my vue single file components using <style lang="postcss" scoped>

[LinusBorg]

This issue is closed. Open a new one with a reproduction

[kid1412621]

To anyone having the same issue despite having placed the directives in the correct place: vue-cli 3 does not pick up on the .postcssrc.js or the postcss.config.js, since it uses the package.json to configure postCSS.

This article helped me solve the problem.

aw, why vue cli3 suggests using babel.config.js instead of package.json#babel to config babel.
Why not portcss? Gee... front-end sucks

[lovetingyuan]

https://github.com/vuejs/vue-cli/issues/2985

[matzeso]

Came here with the same issue in vue-cli 4.5.4, what worked for me was configuring the postcss-loader via vue.config.js.

Create vue.config.js in root directory (next to package.json) and fill it with:

const tailwindcss = require('tailwindcss'); 
const autoprefixer = require('autoprefixer');


module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    tailwindcss,
                    autoprefixer,
                ],
            },
        },
    },
}

Hope it helps somebody :-)