Giters

catamphetamine / webpack-isomorphic-tools

Server-side rendering for your Webpack-built applications (e.g. React)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

css-load problem

2637309949 opened this issue · comments

commented

here is my config

////=====================////
const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');

module.exports = {
debug: false,
webpack_stats_file_path: 'webpack-stats.json',
webpack_assets_file_path: 'webpack-assets.json',
assets:
{
images: {
extensions: [
'jpeg',
'jpg',
'png',
'gif',
'ico'
],
parser: WebpackIsomorphicToolsPlugin.url_loader_parser
},
style_modules: {
extensions: ['less', 'scss', 'css'],
filter: (module, regex, options, log) => {
return options.development ? WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log) : regex.test(module.name);
},
path: (module, options, log) => {
return options.development ? WebpackIsomorphicToolsPlugin.style_loader_path_extractor(module, options, log) : module.name;
},
parser: (module, options, log) => {
return options.development ? WebpackIsomorphicToolsPlugin.css_loader_parser(module, options, log) : module.source;
},
}
}
};
////=====================////

and my css-load in webpack

//////
{ test: /.css$/, loader: 'style!css?modules&localIdentName=[local]' }
//////

after building, css file is packed in this way( in webpack-assets.json file )：

"./~/antd/lib/affix/style/index.css": ".ant-affix {\n position: fixed;\n z-index: 10;\n}\n",

while here some code from react-redux-universal-hot-example-master, is so diff, and This is what I want
////
"./src/containers/Widgets/Widgets.scss": {
"widgets": "widgets___3TrPB",
"refreshBtn": "refreshBtn___18-3v",
"idCol": "idCol___3gf_9",
"colorCol": "colorCol___2bs_U",
"sprocketsCol": "sprocketsCol___3nkz0",
"ownerCol": "ownerCol___fwn86",
"buttonCol": "buttonCol___1feoO",
"saving": "saving___7FVQZ",
"_style": ".widgets___3TrPB .refreshBtn___18-3v {\n margin-left: 20px;\n}\n\n.widgets___3TrPB .idCol___3gf_9 {\n width: 5%;\n}\n\n.widgets___3TrPB .colorCol___2bs_U {\n width: 20%;\n}\n\n.widgets___3TrPB .sprocketsCol___3nkz0 {\n width: 20%;\n text-align: right;\n}\n\n.widgets___3TrPB .sprocketsCol___3nkz0 input {\n text-align: right;\n}\n\n.widgets___3TrPB .ownerCol___fwn86 {\n width: 30%;\n}\n\n.widgets___3TrPB .buttonCol___1feoO {\n width: 25%;\n}\n\n.widgets___3TrPB .buttonCol___1feoO .btn {\n margin: 0 5px;\n}\n\n.widgets___3TrPB tr.saving___7FVQZ {\n opacity: 0.8;\n}\n\n.widgets___3TrPB tr.saving___7FVQZ .btn[disabled] {\n opacity: 1;\n}\n"
},
////

i am dont know what wrong in my config file？

commented

Format your code appropriately first.
Then I might have a look.

Ok, since you don't even know how to do that...

const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');

module.exports = {
  debug: false,
  webpack_stats_file_path: 'webpack-stats.json',
  webpack_assets_file_path: 'webpack-assets.json',
  assets:
  {
    images: {
      extensions: [
        'jpeg',
        'jpg',
        'png',
        'gif',
        'ico'
      ],
      parser: WebpackIsomorphicToolsPlugin.url_loader_parser
    },
    style_modules: {
      extensions: ['less', 'scss', 'css'],
      filter: (module, regex, options, log) => {
        return options.development ? WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log) : regex.test(module.name);
      },
      path: (module, options, log) => {
        return options.development ? WebpackIsomorphicToolsPlugin.style_loader_path_extractor(module, options, log) : module.name;
      },
      parser: (module, options, log) => {
        return options.development ? WebpackIsomorphicToolsPlugin.css_loader_parser(module, options, log) : module.source;
      },
    }
  }
};

and my css-load in webpack

 { test: /\.css$/, loader: 'style!css?modules&localIdentName=[local]' }

after building, css file is packed in this way( in webpack-assets.json file )：

"./~/antd/lib/affix/style/index.css": ".ant-affix {\n  position: fixed;\n  z-index: 10;\n}\n",

while here some code from react-redux-universal-hot-example-master, is so diff, and This is what I want

    "./src/containers/Widgets/Widgets.scss": {
      "widgets": "widgets___3TrPB",
      "refreshBtn": "refreshBtn___18-3v",
      "idCol": "idCol___3gf_9",
      "colorCol": "colorCol___2bs_U",
      "sprocketsCol": "sprocketsCol___3nkz0",
      "ownerCol": "ownerCol___fwn86",
      "buttonCol": "buttonCol___1feoO",
      "saving": "saving___7FVQZ",
      "_style": ".widgets___3TrPB .refreshBtn___18-3v {\n  margin-left: 20px;\n}\n\n.widgets___3TrPB .idCol___3gf_9 {\n  width: 5%;\n}\n\n.widgets___3TrPB .colorCol___2bs_U {\n  width: 20%;\n}\n\n.widgets___3TrPB .sprocketsCol___3nkz0 {\n  width: 20%;\n  text-align: right;\n}\n\n.widgets___3TrPB .sprocketsCol___3nkz0 input {\n  text-align: right;\n}\n\n.widgets___3TrPB .ownerCol___fwn86 {\n  width: 30%;\n}\n\n.widgets___3TrPB .buttonCol___1feoO {\n  width: 25%;\n}\n\n.widgets___3TrPB .buttonCol___1feoO .btn {\n  margin: 0 5px;\n}\n\n.widgets___3TrPB tr.saving___7FVQZ {\n  opacity: 0.8;\n}\n\n.widgets___3TrPB tr.saving___7FVQZ .btn[disabled] {\n  opacity: 1;\n}\n"
    },
commented

@halt-hammerzeit so sorry, it is so busy in china‘s new year, that i forgot to reply to your information. but thank your ans