質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%

受付中

WebpackでSlickを使用する際に、"slick-theme.scss"内で使用されている画像とフォントが読み込めない

kiiit
kiiit

総合スコア6

0回答

0リアクション

0クリップ

264閲覧

投稿2017/08/26 10:35

#内容
WebpackでjQueryのスライダー用ライブラリSlickを使用しているのですが、
slick-theme.scssをimportするとscss内で定義されている画像とフォントのパスが
localhostのドキュメントルートからのパスになってしまい404 Not Foundとなってしまいます。

現状回避策として、
htmlファイルに直接書きを記述することでslick-theme.cssのみWeb上から読み込んでいる状態です。

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

#ディレクトリ構造

[ProjectDirectory] ├── package.json ├── public │ ├── commons.js │ ├── entry.js │ ├── detail │ │ └── 1.html │ └── js │ └── ①detail.js(この中でslickをimport) ├── src │ ├── entry.js │ └── js │ ├── _common.js │ ├── detail.js │ └── list.js └── ②webpack.config.babel.js

##①detail.js

// <[slick読み込み]===============================> import 'slick-carousel'; import 'slick-carousel/slick/slick.scss'; import 'slick-carousel/slick/slick-theme.scss'; // <[slickerの設定]>============================> $('.slider').slick({ dots: true, centerMode: true, centerPadding: '150px', responsive: [ { breakpoint: 767, settings: { centerMode: false } } ] })

##②webpack.config.js

'use strict'; // <[Origin]==================================> const webpack = require('webpack'), path = require('path'), autoprefixer = require('autoprefixer'), precss = require('precss') // <[Paths]==================================> const src_path = path.resolve(__dirname, 'src'), dist_path = path.resolve(__dirname, 'public') // <[Plugins]==================================> const CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({ name: 'commons', filename: 'commons.js' }), jQuery = new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), NamedModulesPlugin = new webpack.NamedModulesPlugin(), HotModuleReplacementPlugin = new webpack.HotModuleReplacementPlugin(), LoaderOptionsPlugin = new webpack.LoaderOptionsPlugin({ options: { postcss: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ] } }) // <[ModuleRules]=============================> const LOADER_ES6 = { test: /\.js$/, include: src_path, use: [{ loader: 'babel-loader', options: { presets: [ ['es2015', {modules: false}] ] } }] }, LOADER_SCSS = { test: /\.(css|scss)$/, loader: ['style-loader', 'css-loader?-url', 'sass-loader', 'postcss-loader'] }, LOADER_OTHERS = { test: /\.(eot|svg|woff|ttf|gif)$/, loader: 'url-loader' } // <[CoreConfigs]=============================> const config = { context: src_path, entry: { 'entry': './entry.js', 'js/list': './js/list.js', 'js/detail': './js/detail.js' }, output: { path: dist_path, publicPath: '/', filename: '[name].js' }, module: { rules: [ LOADER_ES6, LOADER_SCSS, LOADER_OTHERS ], }, plugins: [ jQuery, NamedModulesPlugin, HotModuleReplacementPlugin, CommonsChunkPlugin, LoaderOptionsPlugin ], devServer: { contentBase: dist_path, port: 8080, inline: true, hot: true } } module.exports = config;

#ブラウザで表示されるエラーログ

http://localhost:8080/detail/ajax-loader.gif 404 (Not Found) http://localhost:8080/detail/fonts/slick.woff http://localhost:8080/detail/fonts/slick.ttf

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る