

### 内容

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

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

[code]

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

### ディレクトリ構造

[code]

    [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
    
[/code]

#### ①detail.js

[code]

    // <[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
          }
        }
      ]
    })
    
[/code]

#### ②webpack.config.js

[code]

    '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;
    
[/code]

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

[code]

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


CC BY-SA 4.0
2017-08-26T10:39:58.433
37508
2023-08-22T04:15:25.657
2023-08-22T04:15:25.657
3060
25054
question
webpack slick.js
WebpackでSlick.jsを使用する際に、"slick-theme.scss"内で使用されている画像とフォントが読み込めない


slick-theme.scssファイル内で以下のパスが設定されているので、`/detail`からの相対パスになってしまっているようです。

[code]

    $slick-font-path: "./fonts/" !default;
    $slick-loader-path: "./" !default;
    
[/code]

私のプロジェクトではscssからslickのスタイルをimportをしているのですが、そこでfile-pathを設定しています。

[code]

    // プロジェクト内のscss
    $slick-font-path: "~slick-carousel/slick/fonts/";
    $slick-loader-path: "~slick-carousel/slick/";
    @import "~slick-carousel/slick/slick.scss";
    @import "~slick-carousel/slick/slick-theme.scss";
    
[/code]


CC BY-SA 3.0
2017-08-29T01:56:11.233
37554
2017-08-29T01:56:11.233
25076
37508
answer