https://flex-box.net/slick-npm/
上記のサイトを見て、やってみたのですが、
webpackでビルドした時に、
ERROR in ./node_modules/slick-carousel/slick/slick-theme.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
@charset 'UTF-8';
| /* Slider */
| .slick-loading .slick-list
ERROR in ./node_modules/slick-carousel/slick/slick.css 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* Slider */
.slick-slider
| {
| position: relative;
@ ./src/assets/js/script.js 3:0-40
このようなエラーが出てしまいます。
javascript
1import $ from 'jquery'; 2import 'slick-carousel'; 3import 'slick-carousel/slick/slick.css'; // 追加 4import 'slick-carousel/slick/slick-theme.css'; // 追加 5 6 7import { header } from './modules/header'; 8 9import { mv } from './modules/mv'; 10 11import { loading } from './modules/loading';
webpack
1const webpack = require('webpack'); 2const path = require('path'); 3 4module.exports = { 5 // モード値を production に設定すると最適化された状態で、 6 // development に設定するとソースマップ有効でJSファイルが出力される 7 mode: 'development', 8 9 // メインとなるJavaScriptファイル(エントリーポイント) 10 entry: { 11 script: `./src/assets/js/script.js`, 12 }, 13 output: { 14 filename: '[name].js', 15 path: path.join(__dirname, 'dist/assets/js') 16 }, 17 module: { 18 rules: [ 19 { 20 // node_module内のcss 21 test: /node_modules/(.+).css$/, 22 use: [ 23 { 24 loader: 'style-loader', 25 }, 26 { 27 loader: 'css-loader', 28 options: { url: false }, 29 }, 30 ], 31 }, 32 { 33 // 拡張子 .js の場合 34 test: /.js$/, 35 use: [ 36 { 37 // Babel を利用する 38 loader: 'babel-loader', 39 // Babel のオプションを指定する 40 options: { 41 presets: [ 42 // プリセットを指定することで、ES2019 を ES5 に変換 43 '@babel/preset-env', 44 ], 45 }, 46 }, 47 ], 48 }, 49 ], 50 }, 51 devtool: 'source-map', 52}; 53
どなたかわかる方いらっしゃいますか。
宜しくお願い致します。
あなたの回答
tips
プレビュー