#内容
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
あなたの回答
tips
プレビュー