Usage without semantic-ui-react-less-loader

Hey, thank you for publishing this loader! I am struggling to get it to work without semantic-ui-react-less-loader. Primarily, I want to customize the Semantic UI theme with my own theme. If possible, I would like to manually select which components to include.

So what I did is, I created my own semantic-ui-theme folder within my project. Then I updated my Webpack 2 config to include this rule (it is the only rule for .less files; CLIENT, SERVER and COMPRESS are boolean variables, context points to C:\dev\react-showcase\src):

{
    // Load .less files from semantic-ui-less folder.
    test: /\.less$/,
    include: /[/\\]node_modules[/\\]semantic-ui-less[/\\]/,
    use: ExtractTextPlugin.extract({
        // Use style-loader fallback only for client builds
        fallback: CLIENT ? { loader: 'style-loader', options: { sourceMap: true } } : undefined,
        use: [
            // Set importLoaders to 2, because there are two more loaders in the chain (postcss-loader
            // and semantic-ui-less-module-loader), which shall be used when loading @import resources
            // in CSS files:
            {
                // For server builds, use 'css-loader/locals' instead, which does not emit the CSS
                loader: 'css-loader' + (SERVER ? '/locals' : ''),
                options: {
                    importLoaders: 2,
                    sourceMap: true,
                    minimize: COMPRESS
                }
            },
            { loader: 'postcss-loader', options: { sourceMap: true } },
            {
                loader: 'semantic-ui-less-module-loader',
                options: {
                    siteFolder: path.resolve(context, 'views/app/semantic-ui-theme/site'),
                    themeConfigPath: path.resolve(context, 'views/app/semantic-ui-theme/theme.config'),
                }
            }
        ]
    })
}

The semantic-ui-theme folder contains only a theme.config file (copied from semantic-ui-less/theme.config.example) and an empty site folder.

If I now add the imports

import 'semantic-ui-less/definitions/globals/reset.less';
import 'semantic-ui-less/definitions/globals/site.less';

then only some base styling is applied. If instead I import

import "semantic-ui-less/semantic.less";

then Webpack complains that it cannot find the fonts, e.g. with Module not found: Error: Can't resolve './themes/themes/default/assets/fonts/icons.eot' in 'C:\dev\react-showcase\node_modules\semantic-ui-less':

ERROR in ./~/css-loader?{"importLoaders":2,"sourceMap":true,"minimize":false}!./~/postcss-loader/lib?{"sourceMap":true}!./~/semantic-ui-less-module-loader?{"siteFolder":"C://dev//react-
showcase//src//views//app//semantic-ui-theme//site","themeConfigPath":"C://dev//react-showcase//src//views//app//semantic-ui-theme//theme.config"}!./~/semantic-ui-less/semantic.less
Module not found: Error: Can't resolve './themes/themes/default/assets/fonts/icons.eot' in 'C:\dev\react-showcase\node_modules\semantic-ui-less'
 @ ./~/css-loader?{"importLoaders":2,"sourceMap":true,"minimize":false}!./~/postcss-loader/lib?{"sourceMap":true}!./~/semantic-ui-less-module-loader?{"siteFolder":"C://dev//react-showca
se//src//views//app//semantic-ui-theme//site","themeConfigPath":"C://dev//react-showcase//src//views//app//semantic-ui-theme//theme.config"}!./~/semantic-ui-less/semantic.less 6:287904-
287961 6:287984-288041
 @ ./~/semantic-ui-less/semantic.less
 @ ./src/views/app/semantic-ui-theme/index.js
 @ ./src/views/app/App.js
 @ ./src/core/client.js
 @ multi (webpack)-dev-server/client?http://localhost:3001 webpack/hot/dev-server ./core/babel-polyfill.js react-hot-loader/patch webpack-dev-server/client?http://localhost:3001 webpack
/hot/only-dev-server ./core/client.js

So how do I use the loader correctly without semantic-ui-react-less-loader?

gadyonysh / semantic-ui-less-module-loader

Usage without semantic-ui-react-less-loader #5