Vue cli plugin to support style-resources-loader.

JavaScript 100.00%

vue-cli-plugin-style-resources-loader's People

Contributors

Stargazers

Watchers

Forkers

iliyazelenko fossabot intermundos juanbrujo greg-nagy cjjlovedsn yiwuyu

vue-cli-plugin-style-resources-loader's Issues

This plug-in causes all files to depend on less-loader.

These dependencies were not found:

* axios in ./src/util/xhr.js
* iview in ./src/main.js
* swiper in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/[email protected]@style-resources-loader/lib??ref--14-oneOf-0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/swiper/swiper.vue?vue&type=script&lang=js&
* swiper/dist/css/swiper.min.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/[email protected]@style-resources-loader/lib??ref--14-oneOf-0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/swiper/swiper.vue?vue&type=script&lang=js&
* vue-router in ./src/router/index.js
* vuex in ./src/store/index.js

To install them, you can run: npm install --save axios iview swiper swiper/dist/css/swiper.min.css vue-router vuex
Failed to resolve loader: less-loader
You may need to install it.
Failed to resolve loader: less-loader
You may need to install it.
Failed to resolve loader: less-loader
You may need to install it.
Failed to resolve loader: less-loader
You may need to install it.
Failed to resolve loader: less-loader
You may need to install it.
Failed to resolve loader: less-loader
You may need to install it.

The annotation configuration is useless.

No loading global styles unless I declare in component

This seems to be strange behavior to me. I have loaded the plugin, and in my vue.config I have the following:

const path = require("path");

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [path.resolve(__dirname, "./src/styles/init.scss")]
    }
  }
};

This seems to be something with the way Vue renders and processes the styles. So I have added a style setting

* {
}

in the App.vue file so that styles are loaded on each page. I assumed this would do this by default with the loader.

Is there a better way?

Cannot Add Loader

When I run "vue add style-resource-loader" it fails with the following message (I put in placeholder text for my user folder, but everything else is correct).

ERROR TypeError: Cannot read property 'version' of undefined
TypeError: Cannot read property 'version' of undefined
at add (C:\Users\XXXXX\AppData\Roaming\npm\node_modules@vue\cli\lib\add.js:23:35)
at processTicksAndRejections (internal/process/task_queues.js:93:5)

Plugin doesn't work if I remove style tag from App.vue component

Can anyone please explain why is that?

where's the documentation??

Before and after installation iview UI

Before installation

After installation

Please support all options from style-resources-loader

The original style-resources-loader supports multiple options.

Please can you add the support of these options in the plugins options?

For instance, with the injector option:

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'stylus',
      'patterns': [
        path.resolve(__dirname, './src/styles/abstracts/*.styl'),
      ], 
      injector: 'append',
    }
  }
}

Thanks in advance

Didn't work for me for SCSS

I tried using this package to import an SCSS themes file into all my single-file components but I kept getting a syntax error that looked like it was trying to import my SCSS file into my main.js file. When I switched to just use the style-resources-loader code found here it worked fine.

Here's the code that's working fine:

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../server/templates/SPA"),
  assetsDir: "../../static/SPA",
  chainWebpack: config => {
    // The code below is used to automatically import the SCSS color themes into every single-file component.
    // For more information see: https://cli.vuejs.org/guide/css.html#automatic-imports
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/assets/themes.scss'),
      ],
    })
}

Here's the code that wasn't working:

const path = require("path");

module.exports = {
    outputDir: path.resolve(__dirname, "../server/templates/SPA"),
    assetsDir: "../../static/SPA",
    pluginOptions: {
        'style-resources-loader': {
            'patterns': [
                path.resolve(__dirname, './src/assets/themes.scss'),
            ]
        }
    }
}

Here's my package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "watch": "npm-watch"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "hotkeys-js": "^3.4.1",
    "lodash": "^4.17.10",
    "style-resources-loader": "^1.2.1",
    "underscore": "^1.8.3",
    "vue": "^2.5.21",
    "vue-clickaway2": "^2.3.1",
    "vue-resource": "^1.3.4",
    "vue-router": "^3.0.2",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.1",
    "@vue/cli-service": "^3.2.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.11.1",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.11.0",
    "npm-watch": "^0.4.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "watch": {
    "build": {
      "patterns": [
        "src/**/",
        "test/**/",
        "/"
      ],
      "extensions": "js,vue,html",
      "runOnChangeOnly": true
    }
  }
}

can't use injector?

How to find the cause of the error

hi, my options is not wort,
How to find the cause of the error?
this is my config.

// vue.config.js
const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]-[local]-[hash:5]',
        camelCase: 'only'
      },
    },
  },

  pluginOptions: {
    'style-resources-loader': {
      patterns: [path.resolve(__dirname, './src/style/index.stylus'),]
    }
  }
}

yarn serve is normal, no bug

Support both scss and less in one project?

Teams like to use different preprocessors.
We would like to reuse some styles defined in .scss and .less.

Is it possible to accomplish this?

I started my project via vue-cli and chosen less as the default one.
Here is my vue.config.js:

pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        path.resolve(__dirname, "./src/styles/globals/*.less"),
        path.resolve(__dirname, "./src/styles/side-configuration/*.less"),
      ],
    },
  },

How should I add support for .scss?
If I understood correctly, value of preProcessor can only be string, right?

can it work with HMR?

it doesn't work for HotModuleReplacement

"//xxx" makes all style files by imported invalid, when "/xxx/" is valid

error example

imports.scss

// variable
$menusWidth: 180px;
$navbarHeight: 50px;
$maxNewsWidth: 380px;

vue.config.js

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        resolve('src/styles/import.scss'),
      ],
    }
  },

valid example

imports.scss

/*variable*/
$menusWidth: 180px;
$navbarHeight: 50px;
$maxNewsWidth: 380px;

vue.config.js

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        resolve('src/styles/import.scss'),
      ],
    }
  },

???

How To Import npm Dependencies?

In a vue component to import an npm dependency in stylus you write:
@import '~open-color/open-color.styl'
this is very literal and I don't know how to import open-color directly without specifying the path (for example I don't know how to import nib in vue components)
but my question is how to import anything npm

const path = require('path');
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'stylus',
        patterns: [
          path.resolve(__dirname, '~open-color/open-color.styl')
        ],
      },
    },
};

doesn't work

nguyenvanduocit / vue-cli-plugin-style-resources-loader Goto Github PK