Autoprefixer is only active for .vue files

Question

Autoprefixer is only active for .vue files

fvsch opened this issue 7 years ago · comments

Florens Verschelde commented 7 years ago

This seems to be the same bug as #85, which was closed because, I quote, "Autoprefixer is in the latest template release", but we don't get Autoprefixer working for CSS or SCSS files outside of .vue components.

Steps to reproduce:

vue init webpack postcss-test && cd postcss-test
npm install
npm install node-sass sass-loader --save-dev

Then create a few test stylesheets:

/* src/assets/test1.css */
.test1 { display: flex; }

// src/assets/test2.scss
.test2 { display: flex; }

Finally, let's test a few ways to load these:

As entry points:

// build/webpack.base.conf.js
...
module.exports = {
  entry: {
    app: './src/main.js',
    test1: './src/assets/test1.css',
    test2: './src/assets/test2.scss'
  },
  ...
}

Then npm run build. Results:

/* dist/static/css/test1.ca0cd0e2b1b09d965f5ce5c21f1fc6e7.css */
.test1{display:flex}

/* dist/static/css/test2.4d716aeffa93f62596ef617b3129561c.css */
.test2{display:flex}

As JS imports:

<!-- src/App.vue -->
<script>
import {} from './assets/test1.css'
import {} from './assets/test2.scss'
...
</script>

(Remove the entry points test before.) Then npm run build. Result:

/* dist/static/css/app.4006533b8ed715dfd365cdd7a0b4f7be.css */
.test1,.test2{display:flex}

In style tags in components:

<!-- src/App.vue -->
<style>
@import './assets/test1.css';
.test1b { display: flex; }
</style>

<style lang="scss">
@import './assets/test2.scss';
.test2b { display: flex; }
</style>

Result:

/* dist/static/css/app.6c438b7dca17522bb707d18112b8cbcb.css */
.test1{display:flex}.test1b,.test2,.test2b{display:-webkit-box;display:-ms-flexbox;display:flex}

Conclusion: Autoprefixer is only used for style tags inside .vue components.
When using Sass or SCSS syntax and an external Sass/SCSS stylesheet, this can be used to apply Autoprefixer to code stored outside of components; the same trick does not work for CSS imports.

Was #85 closed based on a faulty assumption?

As a side note, debugging this issue proved difficult (for several team members) because this template comes with references to autoprefixer and postcss in two locations:

package.json -> "browserslist" entry
.postcssrc.js

But the config in config and build never references these locations, postcss or autoprefixer. It's all happening by magic, but only in very limited settings.

Maybe the brower list and postcss config should be moved to build/vue-loader.conf.js, if it only applies to vue-loader? As it is, it's sending the message that it's a project-wide config, but in practice it doesn't seem to be.

Florens Verschelde · Answer 1 · Thu Mar 16 2017 01:03:04 GMT+0800 (China Standard Time)

Possible duplicate of: #544
(I don't read Chinese but it seems similar.)

cy · Answer 2 · Fri Mar 17 2017 09:48:08 GMT+0800 (China Standard Time)

Yeah, I have the problem too. I have to add postcss-loader to loaders

Note: need to yarn add postcss-loader -D

Matheus Grieger · Answer 3 · Thu Jun 08 2017 11:16:32 GMT+0800 (China Standard Time)

Got this problem as well. Importing any SCSS file, though loads them correctly, does not autoprefix them.

But above solution by @cycold works like a charm, thank you!

Özgür Uysal · Answer 4 · Wed Jun 14 2017 20:24:56 GMT+0800 (China Standard Time)

Yes the solution from @cycold works great. However you get a warning pointing to https://github.com/postcss/postcss-loader#sourcemap if you have sourceMap set to false in config/index.js that is the default setting.

Would be nice if this feature came out of the box as it's kinda expected result.

かがみ · Answer 5 · Thu Jun 22 2017 12:50:57 GMT+0800 (China Standard Time)

~~In @cycold 's code other loaders are pushed to the loaders array, resulting something like [cssLoader, postcssLoader, ...otherStyleLoader], so I try inserting postcssLoader at last place.~~

EDIT: my code is not correct.

Deleted user · Answer 6 · Fri Jul 21 2017 09:00:13 GMT+0800 (China Standard Time)

Any further developments to this? I have to suppport IE10.... :(
Getting the same sourcemap issues as @cycold has stated.

Saran Tanpituckpong ✔️ · Answer 7 · Mon Sep 25 2017 01:38:56 GMT+0800 (China Standard Time)

@KagamiChan Your code seems incorrect. @cycold is right. postcss-loader shouldn't be added at the last.

From postcss-loader's docs:

Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

かがみ · Answer 8 · Mon Sep 25 2017 09:17:55 GMT+0800 (China Standard Time)

@gluons agreed, you're right, edited my code

大龙 · Answer 9 · Fri Sep 29 2017 11:24:51 GMT+0800 (China Standard Time)

@cycold I tried the solution but did not work

anyone can help? tks

diachedelic · Answer 10 · Tue Nov 14 2017 15:18:40 GMT+0800 (China Standard Time)

I ran vue init webpack my-project just now, and was able to reproduce @fvsch 's 3rd example:

<!-- src/App.vue -->
<style>
@import './assets/test1.css';
.test1b { display: flex; }
</style>

<style lang="scss">
@import './assets/test2.scss';
.test2b { display: flex; }
</style>

Result:

.test1{
  display:flex
}

.test1b,
.test2,
.test2b{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex
}

This is an issue for using 3rd party Vue components which import plain css.

Thorsten Lünborg · Answer 11 · Tue Nov 14 2017 15:38:39 GMT+0800 (China Standard Time)

Hm, that's weird. Postcss is active for .css files since yesterday, so airport fixer should be applied. I will check this out.

diachedelic · Answer 12 · Tue Nov 14 2017 15:45:46 GMT+0800 (China Standard Time)

Does `vue-cli` cache the webpack template, or check for the latest every time? How do I actually check the version/changeset of the template I installed?

…

On 14 Nov 2017, at 6:39 pm, Thorsten Lünborg ***@***.***> wrote: Hm, that's weird. Postcss is active for .css files since yesterday, so airport fixer should be applied. I will check this out. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#600 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAS8wEt0ZCuhcFmGU6hetmYMyh6GRw-tks5s2UOqgaJpZM4MeO72>.

Thorsten Lünborg · Answer 13 · Tue Nov 14 2017 15:48:01 GMT+0800 (China Standard Time)

We didn't properly version for the longest time, but recently started adding a version number to the top of /config/index.js

diachedelic · Answer 14 · Tue Nov 14 2017 19:50:59 GMT+0800 (China Standard Time)

Ah then it is broken in v1.2.1

Thorsten Lünborg · Answer 15 · Tue Nov 14 2017 20:07:13 GMT+0800 (China Standard Time)

I have a suspicion, but can't verify until tonight. However I already made a PR that aims to solve this or something related.

https://github.com/vuejs-templates/webpack/pull/1053/files

You might try to give this a spin. The PR itself is also not thoroughly tested et (it's WIP), but maybe it just works :-P

diachedelic · Answer 16 · Tue Nov 14 2017 20:27:45 GMT+0800 (China Standard Time)

Yes that fixes it!

Discussion of css-loader's importLoaders option

Thorsten Lünborg · Answer 17 · Tue Nov 14 2017 20:33:23 GMT+0800 (China Standard Time)

Thanks. Will apply that PR tonight hopefully.

Kirk Grover · Answer 18 · Wed Nov 15 2017 10:46:40 GMT+0800 (China Standard Time)

@ozguruysal and @tfsimondouglas, I was getting the same sourcemap warning. Building on @cycold's solution, you can get the warning to go away by adding the sourceMap option to postcssLoader in utils.js:

var postcssLoader = {
    loader: 'postcss-loader',
    options: {
        sourceMap: options.sourceMap
    }
}

Blake Newman · Answer 19 · Fri Nov 17 2017 17:11:56 GMT+0800 (China Standard Time)

Additionally there is this PR for vue-loader that solves the use of lang="postcss".

vuejs/vue-loader#1055

Thorsten Lünborg · Answer 20 · Mon Dec 18 2017 16:54:29 GMT+0800 (China Standard Time)

fixed by adding postcss-loader for all *.*css files as well.

Adi · Answer 21 · Sun Feb 25 2018 21:48:05 GMT+0800 (China Standard Time)

I'm using an old version of the template that has this issue and it seemed really peculiar, because I noticed CSS within an SFC style tag gets prefixed, but postcss-loader is not to be found in the template's dependencies. Further investigating revealed that css-loader includes postcss in its dependencies and probably auto invokes it if browserslist is present in your package.json, thus auto-prefixing the CSS as expected. All, but SCSS files imported in a script tag (and perhaps other, similar import variations). From this closed issue, I can only deduce postcss-loader has to be explicit for a complete, multi import-scenario solution.

Mr.zhao · Answer 22 · Tue May 29 2018 11:06:48 GMT+0800 (China Standard Time)

const postcssLoader = {
loader: 'postcss-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}

// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, postcssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

eg: my code did not work, help tks!

Mr.zhao · Answer 23 · Tue May 29 2018 11:08:55 GMT+0800 (China Standard Time)

this code maybe had other problem , i not kook at