Css-loader: basscss like modules not supported?

[remoe]

Hi

I try to import the untransformed css of this:

https://github.com/jxnblk/basscss

but this:

@import '~basscss'

doesn't work. And also not:

@import '~basscss/src/basscss.css';

It has the following error:

ERROR in ../~/css-loader!../~/basscss/src/basscss.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./basscss-base in /node_modules/basscss/src
 @ ../~/css-loader!../~/basscss/src/basscss.css 2:78-157

It doesn't correctly resolve dependencies.

How can I use this?

UPDATE: I found something similar: #12 . But resolve.alias is not a clean way to solve this.

[jhnns]

Just write

@import '~basscss/css/basscss.css';

and it should work :stuck_out_tongue:

[remoe]

Sorry, this import only the css, but I need the untransformed css.

[jhnns]

What is the "untransformed css"? Why do you need it?

When you import ~basscss/src/basscss.css you're only importing a file containing these lines

@import 'basscss-base';
@import 'basscss-utilities';
@import 'basscss-positions';
@import 'basscss-ui-utilities';
@import 'basscss-grid';
@import 'basscss-table-object';
@import 'basscss-color-basic';

And these files are not in the repository...

[remoe]

I need this for further customizing.
yes, I also tried this and has the following issue with webpack:

https://github.com/jxnblk/basscss-color-basic/pull/2
https://github.com/jxnblk/basscss-ui-utilities/pull/1

currently, It doesn't work. The css is not transformed after this:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer-core');
var custom_media = require("postcss-custom-media");
var custom_properties = require("postcss-custom-properties");

var path = require('path')

module.exports = {
  context: __dirname + "/lib",
  entry: { 
    build: './boot/index.js'
  },
  output: {
    path: path.join(__dirname,'/build/'),
    filename: "index.js"
  },
  module: {
    loaders: [
      { test: /\.json$/, loader: "json-loader" },
      { test: /\.html$/, loader: "html-loader" },
      { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader?safe=1") }
    ]
  },
  resolve: {  
    modulesDirectories: ['node_modules', 'lib']
  },
  externals: {},
  plugins: [
    new ExtractTextPlugin("index.css", {
      allChunks: true
    })
  ],
  postcss: [ custom_properties, autoprefixer, custom_media],
  node: {
    fs: "empty"
  }
};

I think, it is my fault, but I didn't found it :)

[jhnns]

Your issues won't help, I'm afraid. The problem is that there is no real convention for importing css from a module directory like node_modules or bower_components simply because there are no modular css frameworks (yet).

Using resolve.alias is the only solution in this case... it's not beautiful but sometimes it's necessary (and it works surprisingly well).

BTW: I don't know your setup, but putting lib in modulesDirectories is probably not what you want. webpack uses node's lookup algorithm for all folders specified in modulesDirectories. You probably just want to add lib to resolve.root (which must be an absolute path in this case)?

[remoe]

Thanks for this help. I didn't know about "resolve.root". But what should I write exactly in resolve.alias?
This is the only doc I've found:

http://webpack.github.io/docs/resolving.html
https://github.com/webpack/docs/wiki/resolving

Is it possible to add "index.css" to an alias? Or do I need to add the absolute path to the file?

[jhnns]

Imho your config should look like this (unchanged stuff has been excluded with ...):

module.exports = {
  // your root context should usually be your project root
  context: __dirname, 
  ...
  resolve: {
    root: [
      __dirname,
      path.resolve(__dirname, "./lib")
      // if you're using bower, you should add the absolute path to
      // bower_components here
    ],
    alias: {
      // given that basscss has been installed with npm
      "basscss-base": "../node_modules/basscss-base",
      "basscss-utilities": "../node_modules/basscss-utilities",
      "basscss-positions": "../node_modules/basscss-positions",
      // and so on...
    }
  },
  // setting modulesDirectories is not necessary anymore because
  // webpack uses node_modules by default
  ...
};

[remoe]

Thanks! I will merge this and try to solve the postcss issue ...

[remoe]

(sorry for my english)
I don't really understand which part of the CSS go to the POSTCSS plugin. What it should do:

• read the index.css
• resolve ALL @imports recursive
• the whole transformed CSS should go to the POSTCSS loader.
• the POSTCSS loader with the plugins should resolve all variables and do some other plugin work.
• the processed CSS should output to one CSS file.

This doesn't work today. It is not fully documented how does this transformation currently works in WebPack. It is weird how this all work together:

{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader?safe=1") },
 plugins: [
    new ExtractTextPlugin("index.css", {  allChunks: true  })
  ],
  postcss: [ custom_properties({}), autoprefixer, custom_media],

I don't think this is a POSTCSS issue. I also haven't found a solution with REWORK-LOADER.

For your info: I can get it to work with atomify. But I really want to use WebPack for this ;)

[remoe]

I found that this is called:

https://github.com/webpack/css-loader/blob/master/index.js#L38

but it never calls this:

https://github.com/webpack/css-loader/blob/master/mergeImport.js#L2

I think this is a path issue:

I've dumped (stripped some part of paths) the variables from css-loader/index.js with:

console.log(JSON.stringify(require.resolve("./mergeImport")), JSON.stringify(importUrl) )

The result is:

"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!basscss-base"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!basscss-utilities"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!basscss-positions"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!basscss-ui-utilities"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!basscss-grid"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!basscss-table-object"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!basscss-color-basic"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!flex-object/index.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!../flex-object/index.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!../modal/index.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/reset.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/typography.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/forms.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/buttons.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/tables.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/layout.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/typography.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/margins.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/padding.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/responsive-states.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/button-sizes.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/groups.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/disclosure-states.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/container.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/grid.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/sm-grid.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/md-grid.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/lg-grid.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/table-object.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/sm-table-object.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/md-table-object.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/lg-table-object.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/base.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/form-field-light.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/form-field-dark.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/tables.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/button-blue.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/button-blue-outline.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/button-gray.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/button-red.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/button-nav-light.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/button-nav-dark.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/button-nav-tab.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/colors.css"
"/p/node_modules/css-loader/mergeImport.js" "-!/p/node_modules/css-loader/index.js!./lib/borders.css"

[remoe]

I think this module doesn't work with my CSS environment. I use now WebPack only for JS. And this works great! For CSS I use the following modules in combination with GULP:

gulp
gulp-webpack
gulp-watch
gulp-rework
rework-custom-media
rework-vars
rework-npm

[sokra]

basscss/src/basscss.css is not plain css. It need to be compiled with rework. Try the rework-loader or the rework-webpack-loader...

[remoe]

@sokra, yes I know, I had tried all of them and had no luck:

https://github.com/okonet/rework-loader/issues/2