File to import not found or unreadable: semantic-ui. about semantic-ui-sass

[NideoTV]

@jhnferraris

Found the solution for Angular. This is related to this issue..

First, in your .angular-cli.json, add this to the "apps" object :

"stylePreprocessorOptions": {
        "includePaths": [
          "../node_modules/semantic-ui-sass"
    ]
 },

Then in your styles.scss, you can import like this :

@import "semantic-ui.scss";

To solve the icons error, just overwrite their path by prepending this before the import :

$icons-font-path: '/node_modules/semantic-ui-sass/icons';
$flags-image-path: '/node_modules/semantic-ui-sass/images';

Hope it helps !

[joshmanders]

You're importing the wrong module. You need to import semantic-ui-sass

[jhnferraris]

@joshmanders

I tried that too

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/resolve-url-loader!./src/client/stylesheets/main.scss
Module build failed: 
@import "semantic-ui-sass";
^
      File to import not found or unreadable: semantic-ui-sass.

[joshmanders]

Try @import "~semantic-ui-sass";

[jhnferraris]

Got a different error now using

@import "~semantic-ui-sass"

in my main.scss

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/file-loader/dist/cjs.js!./node_modules/url-loader!./src/client/stylesheets/main.scss
Module build failed: 
@import "~semantic-ui-sass";
^
      Invalid CSS after "m": expected 1 selector or at-rule, was "module.exports = __"

[joshmanders]

hmm try @import "~semantic-ui-sass/semantic-ui.scss';

[jhnferraris]

@joshmanders

@import "~semantic-ui-sass/semantic-ui.scss'; worked. A new problem now is that the icons are not resolved.

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/client/stylesheets/main.scss
Module not found: Error: Can't resolve '../../icons/icons.woff' in /dir/to/stylesheets

My webpack for the woff or related files are

{
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
        loader: 'url-loader?limit=30000&name=[name].[ext]',
      },

I also tried this approach:

@import "~semantic-ui-sass/semantic-ui.scss";
@import "~semantic-ui-sass/icons";

the error thrown is:

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/client/stylesheets/main.scss
Module build failed: 
@import "~semantic-ui-sass/icons";

[jhessin]

I am having this same issue. I am using mithril and webpack. Here is my webpack.config.coffee

...
  module: rules: [
    {
      test: /\.(gif|png|jpe?g|svg)$/i
      use: [
        'file-loader'
        loader: 'image-webpack-loader'
        options:
          bypassOnDebug: true
      ]
    }
    {
      test: /\.(sass|scss|css)$/
      use:[
        { loader: 'style-loader' }
        { loader: 'css-loader' }
        { loader: 'sass-loader' }
      ]
    }
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      loader: 'file-loader'
    }
    {
      test: /\.(coffee|cson)$/
      use:[
        loader: 'coffee-loader'
        options:
          transpile:
            presets: ['env']
      ]
    }
  ]
  resolve:
    extensions: [
      '.js', '.json'
      '.coffee', '.cson', '.sass'
    ]
  plugins: [
    new HtmlWebpackPlugin()
  ]

[joshmanders]

Yeah, this package needs some love. I don't use Semantic-UI anymore so I hadn't paid much attention.

If anyone wants to jump in and maintain it, I'll gladly add them to the repo and package.