shakacode / sass-resources-loader

SASS resources (e.g. variables, mixins etc.) loader for Webpack. Also works with less, post-css, etc.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Possibly not just sass-resource-loader

opened this issue · comments

I suggest you rename this with [sass|post-css|less|whatever]-resources-loader instead of sass-resources-loader. I am using this with post-css and it works as intended, I had to read your code to give me a hope to try it :), I guess your title would put off many people like me.

@alexfedoseev This is a good idea. I suggest we change the repo name to resources-loader.

I reserved https://www.npmjs.com/package/resources-loader.

commented

I guess make sense, tho it requires some investigation and testing before changing-all-the-things.

Also, Post-CSS handles it way better as it uses js files for this, so it's possible to share variables w/ JS modules, so I wouldn't suggest it for Post-CSS users.

I see how the name is confusing. Probably README should explain clearer what it does.
As I understand it, it loads whatever you throw at it, as long as it's transformed into "regular" (actually, scss-enhanced) css by previous plugins.

The only thing it does is that it transforms sass syntax into css using some set of resources as additional files.

So the sass part in sass-resources-loader means that it loads sass resources and apply these to css which uses sass syntax. It doesn't load any other type of resources and doesn't transform any other css syntax.

@Vanuan I wouldn't change the name unless we have tests for less like we have in the /test/scss directory. Then again, less is less popular probably than sass. And maybe not necessary for post-css.

I'm posting in case anyone else is trying to get this to work with stuff besides sass, or wasn't sure if it would actually work. I was using Nuxt and nuxt-sass-resources-loader wasn't quite working. Probably because I'm trying to load a css file to be pared with postcss (with the postcss-simple-vars plugin). I put sass-resource-loader right after postcss-loader in the config, and it works perfectly fine. Note that open-color.css contains sass-like variables (parseable by use of postcss-simple-vars)

extend(config, ctx) {
      // sass-resource-loader goes right after (array positioning) 
      let sassResourceLoader = {
        loader: 'sass-resources-loader',
        options: {
          resources: path.join(__dirname, 'assets/open-color.css')
        }
      }

      // 6 corresponds to the test for /\.p(ost)?css$/i
      let css = config.module.rules[6]

      css.oneOf.forEach(item => {
        item.use.push(sassResourceLoader);
      })
    }