vuejs / vue-style-loader

💅 vue style loader module for webpack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Transform some output css file by directory

Justinidlerz opened this issue · comments

commented

Do you want to request a feature or report a bug?
feature: Transform some output css files by directory

What is the current behavior?
I have a small project, it include mobile client and desktop client.
I using vue-cli v3.0.1 generate it, and config multiple pages.
I want to share some feature components to multiple client, only style different.
So make the project directory tree look like:

----- public
 |--- index.html                 // desktop page
 |--- mobile.html               // mobile page
----- src
 |--- components             // feature components
 |--- mobile                      // mobile client entry and style
    |--- App.vue
    |--- main.ts
 |--- desktop                   // desktop client entry and style
    |--- App.vue
    |--- main.ts

I want to use px2rem plugin to transform css file while it under the mobile directory.
This is my vue-config file:

module.exports = {
  pages: {
    index: 'src/pc/main.ts',
    mobile: 'src/mobile/main.ts',
  },
  configureWebpack: {
    devServer: {
      disableHostCheck: true
    },
    module: {
      rules: [{
        test: /mobile\/.+\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                px2rem({
                  remUnit: 75,
                }),
              ],
            },
          },
        ],
      }],
    },
  },
};

What is the expected behavior?
The css px transform to rem while it under the mobile directory.

Please mention other relevant information such as your webpack version, Node.js version and Operating System.

  • vue-cli: 3.0.1
  • node.js: 8.11.3