Vue-loader: how to use postcss

[Binaryify]

?

[ghost]

Can you show some code?

[azamat-sharapov]

Did you read README before posting question here? https://github.com/vuejs/vue-loader#postcss

[Binaryify]

yes，but I still understand how to use postcss

[iqingting]

module.exports = {
  ...
  vue: {
    autoprefixer: { browsers: ['last 2 versions'] }
  }
}

App.vue

<style>
  body {
    display: flex;
  }
</style>

the result

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

seems the config is not working

[iqingting]

vue: {
  postcss: [require('postcss-cssnext')()]
  autoprefixer: false
}

App.vue

<style>
  :root {
    --color-main: #333;
  }

  body {
    color: var(--color-main);
  }
</style>

the result has nothing change

好像不能很好的配合 @yyx990803

[Binaryify]

@rguanghui 我的疑问跟你一样，配置没生效

[Binaryify]

app.vue

<style>
:root {
    --color-main: red;
  }

body {
  color: var(--color-main);
}
</style>

build.js

exports.push([module.id, ":root {\n    --color-main: red;\n  }\n\n  body {\n    color: var(--color-main);\n  }", ""]);

webpack.config.js

  vue: {
    loaders: {
    postcss: [require('cssnext')(),require('postcss-nested')(),require('postcss-mixins')()],
    }
  }

[yyx990803]

@zhuangtongfa 仔细看文档，postcss 选项是和 loaders 选项并列的。

@rguanghui 我本地测试正常，确保你用的是最新版本。

[iqingting]

今天醒来又运行一遍，昨天的问题居然没有了 = =

尤老师再帮看下这个问题

App.vue

@import "../vars.css";
body {
  background-color: var(--color-bg);
}

vars.css

:root {
  --color-bg: #fff;
}

vue: {
  postcss: [
    cssnext({ browsers: ['last 2 versions'] })
  ]
}

import 一个文件过来，这样得到的结果变量是并没有解析的。请教尤老师是怎么回事？ @yyx990803

[Binaryify]

你没有import吧

  postcss: [require('cssnext')(),require('postcss-nested')(),require('postcss-mixins')()]

我这样可以用

[ktquez]

@rguanghui
This does not work for me!
Variables in a separate file.

You did it?

[iqingting]

@ktquez

yes, we need postcss-import for this problem.

add below code to webpack config. postcss will work as expected.

postcss: [
  postcssImport({
    addDependencyTo: webpack,
  }),
],

https://github.com/postcss/postcss-import#adddependencyto

[ktquez]

@rguanghui
Thanks, man

[lavezzi1]

Hello guys. I want to use postcss only, without any preprocessors. So, if I write css code inside of *.vue file it works fine (tested nested plugin) but when I write css inside of separate css file it doesn't work, code looks like it doesn't compile. What am I doing wrong? Help please.

[raschhenrik]

@lavezzi1 I use postcss-import plugin before postcss-cssnext. Just add it to your package.json and to your webpack.base.conf.js. Then you can import the variables.css where you need them.

vue: {
postcss: [
require('postcss-import')(),
require('postcss-cssnext')()
],
autoprefixer: false
}

[jwahdatehagh]

@raschhenrik can you elaborate on your setup? when i try to compile an @import statement with postcss-import it seems to use the normal css import functionality and loads the file in the browser instead of inlining it. Thanks!

[lavezzi1]

Webpack alias doesn't work in css files, right?

[zicjin]

@rguanghui
You will be able to show a postcss-import examples? My case run error:

wepack.config:

...
vue: {
    postcss: [
        require('postcss-import')({
            addDependencyTo: webpack
        }),
        require('postcss-cssnext')(),
        require('postcss-mixins')(),
        require('postcss-inline-svg')(),
        require('postcss-sorting')()
    ],
    autoprefixer: false
}
...

App.vue:

<template>
...
</template>

<script>
import Activity from './pages/Activity'
...
</script>

<style scoped>
@import '../vendor/func.css';
...
</style>

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=_v-ee78c684&scoped=true!./~/vue-loader/lib/selector.js?type=style&index=0!./src/pages/Activity.vue
Module build failed: TypeError: Cannot read property 'length' of undefined

remove postcss-import module will take away error. but @import lose efficacy

[LucasIcarus]

@zicjin Don't know have u fixed this. And this error caused by missing ';' after import I guess.

With webpack beta 2.x, use postcss-import will cause loader resolve path error in windows. (https://github.com/webpack/webpack/issues/2901)

Fall to webpack 1.x and with the config

vue: {
    postcss: [
        require('postcss-import')({addDependency: webpack}),
        require('precss')
    ]
}

works fine.

[lavezzi1]

I am use the latest version of vue-cli.

_webpack.base.config.js_

  vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
        require('postcss-import')({
                addDependencyTo: webpack
            }),
        require('postcss-nested')(),
        require('postcss-cssnext')({
            warnForDuplicates: false,
            features: {
                customProperties: {
                    variables: require('../src/variables/custom-properties.json')
                },
                customMedia: {
                    extensions: require('../src/variables/custom-media.json'),
                    appendExtensions: true
                }
            }
        })
    ]
  }

For some reason global variables doesn't work. In the output file I got background-color: var(--red);

How to fix that?

[rvanzon]

@lavezzi1 I am facing the same problem. Did you fix it?

[doublemarked]

I'm not sure how much overlap there is with other problems reported in this thread, but I was seeing a number of issues similar to the ones discussed here,

1. The result from import './assets/whatever.css was not being parsed by postcss (thus vars and things present in browser styles)
2. <style src="./assets/whatever.css"></style> (like in App.vue) would inject styles parsed by postcss (thanks to vue-loader), but changes in files @imported from within that file would not triggering webpack reloads.

I ended up fixing this by,

1. Installing the postcss loader: yarn add postcss-loader
2. Instructing webpack to use the postcss loader for .css files by adding the param 'postcss' to the style loader config at build/utils.js:49,

-    css: generateLoaders(),
+    css: generateLoaders('postcss'),

1. Using the first variant (import 'file.css') inside a script file, so that the file gets loaded by postcss-loader, not vue-loader.

My project was scaffolded by the most recent vue-cli (2.8.1).

[menogo]

@doublemarked how to deal with

import 'path/app.sass/scss/less'

file with autoprefixer or postcss-loader 'autoprefixer' option

[tiodot]

https://github.com/webpack-contrib/css-loader/issues/295#issuecomment-335443361

[KrishnaPG]

Does this mechanism work for cssNext to resolve the css vairables across components and css files? It is not working for me.

How to make the css variables work when they are spread across different components?

For example, the main styles.css file (loaded with import in main.js)
:root { --link-color: #ffffffb3; --link-color-hover: #ffffff; --link-color-disabled: #777; }
In the App.vue component or any other .vue component,
````

``` I would expect the css next to resolve thevar(--link-color)to resolve properly. But it is not resolving and thevar` is output as is.

Wondering if anyone was able to make it work.

[noctre-net]

@KrishnaPG - what works for me and IE11:

• in vue-loader.conf.js

module.exports = {
  // ...
  postcss: [
    require('postcss-import'),
    require('postcss-cssnext')({
      browsers: ['IE 11']
    })
  ]
}

• and then in every Vue component where You will use the variables from styles.css

<style>
  @import '../styles/styles.css';

  /* ... */
</style>

Don't forget to install both dependencies.

[yoyobojo]

@import '../styles/styles.css';

What do you mean you will use variables from styles.css? Do I have to have my css in separate files?