デザインをどうしようか迷っていた時に、semantic-uiというものを見つけました。 semantic-ui

基本的にこちらの情報を参考に進めました、ありがとうございます。 vue-cli with Semantic UI on webpack

進めていると結局私のミスだったのですが、 ERRORが発生したので、その解決方法をまとめました。

ERROR in ./semantic/dist/themes/default/assets/fonts/icons.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./semantic/dist/semantic.css 6:171257-171307
 @ ./semantic/dist/semantic.css
 @ ./src/main.js

ERROR in ./semantic/dist/themes/default/assets/fonts/icons.woff2
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./semantic/dist/semantic.css 6:171093-171145
 @ ./semantic/dist/semantic.css
 @ ./src/main.js

ERROR in ./semantic/dist/themes/default/assets/fonts/icons.woff
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./semantic/dist/semantic.css 6:171176-171227
 @ ./semantic/dist/semantic.css
 @ ./src/main.js

ERROR in ./semantic/dist/themes/default/assets/fonts/icons.eot
Module parse failed: Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./semantic/dist/semantic.css 6:170920-170970 6:170993-171043
 @ ./semantic/dist/semantic.css
 @ ./src/main.js

単純に手順を飛ばしてしまっていたからでした。 このコマンドと、webpackのファイルの更新で対応。

コマンド

$ npm install style-loader --save-dev
$ npm install jquery --save

webpack.config.js

  ~~省略~~
  rules: [
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader',
        'style-loader'
      ],
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader?name=semantic/dist/themes/default/assets/fonts/[name].[ext]'
    },
  ~~省略~~
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  resolve: {

いざコンパイル！

・・・

してみたら、次はこんなエラーが。。。

ERROR in ./node_modules/css-loader!./node_modules/style-loader!./semantic/dist/semantic.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!./semantic.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // Prepare cssTransformation
  7 | var transform;
  8 |

 @ ./semantic/dist/semantic.css 4:14-121
 @ ./src/main.js

これも調べましたら、なんとloaderの順番の問題でした。

{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'style-loader',
    'css-loader'
  ],
},

↓

{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'style-loader'
  ],
},

修正したら、無事Semantic UIのデザインを読み込めました。 順番も大事みたい。