在这里react初学者。我的应用程序使用Create-React-app,我正在为轮播的React-Slick拉动。我正在尝试遵循React-Slick设置中提供的指示,但以下内容对我不起作用:
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";
我有以下错误:
./src/components/Homepage.scss
Module not found: Can't resolve '~slick-carousel/slick/slick.css' in '/Users/simon/Dev/frischideas/site-new/src/components'
如果我将CSS添加到cdn中的index.html,但我宁愿避免使用该网络调用,因为我相信这会影响页面在初始负载时的渲染。
我尝试按照说明来配置创建反应应用以使用相对路径,但这也不适合我。也许我完全误会了
任何建议/澄清都将不胜感激。
更新:从我的webpack.config文件中添加设置(其中大多是create-react-app中的默认值(。
{
test: /.scss$/,
use: [
require.resolve('classnames-loader'),
require.resolve('style-loader'), {
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: 1,
localIdentName: "[name]__[local]___[hash:base64:5]"
},
},{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 6 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway,'
],
remove: false,
flexbox: 'no-2009',
}),
],
},
},{
loader: require.resolve('sass-loader'),
options: {
outputStyle: 'expanded'
}
}
],
}
您更改为:
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
delete 〜
您可能已经错过了:
npm install slick-carousel
您还需要为CSS和字体安装Slick-Carousel。这就是这里的技巧。欢呼...
首先,安装slick-carousel
npm install slick-carousel --save
如果您使用的是纱线,则可以使用
yarn add slick-carousel
然后在您的app.js文件中导入CSS文件。
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
我在这个问题上挣扎,我终于找到了解决方案:
- 只需进入
node_modules
文件夹内部,然后找到slick-carousel
文件夹 - 在此内部找到
slick.scss
和slick-theme.scss
从Slick文件夹中,然后将其打开 - 创建两个单独的文件,并在项目的样式文件夹中使用
_slick.scss
和_slickTheme.scss
的名称 - 从
slick.scss
和slick-theme.scss
复制全部,并将它们放入您新创建的文件(_slick.scss
和_slickTheme.scss
( - 将它们导入您的
app.scss
文件 - 现在,如果您使用像我这样的WebPack,我猜您得到的无法解决
'./ajax-loader.gif'
错误,并且无法解决该字体错误。 - 实际上,这些文件是由
slick-carousel
CSS IT自我使用的,因为我们可以简单地进入您新创建的_slickTheme.scss
并找到这些行
/* Slider */
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
/* Icons */
@if $slick-font-family == "slick" {
@font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
- 评论他们
您需要具有适当的加载程序。将样式加载程序与CSS加载器结合使用,用于CSS。使用File-Loader和URL-LOADER来加载CSS文件中链接的字体和图像。
(这是文件添加程序的配置设置(
所以,最后,您的 webpack.config.js 应该包含类似的东西:
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react"
].map(require.resolve)
}
}
},
{
test: /.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
]
},
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
之后,您可以简单地将样式导入到应用程序输入点(例如/src/index.js (:
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
它失败了,因为您正在应用程序中导入CSS模块,并且由于被缓存而没有应用Slick的样式。我已经在我的项目中修复了以下内容:
以您的样式。Scss文件放置此
:global {
@import 'node_modules/slick-carousel/slick/slick';
}
您错过了安装光滑的轮播。尝试此代码
npm install slick-carousel
单击此处以获取更多详细信息
您需要在没有~
符号的情况下安装react-slick
CSS文件:
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
,您还需要在显示您的 SLICK slider
的组件中导入它们例如,如果您有一个**滑块组件**将在 HOME组件中使用,则也需要在Home中导入Slick CSS文件。它对我有用。
,如果您要更改方向到rtl
,则需要使用ltr
进行滑块
并检查要安装的slick-carousel
要导入样式,请确保首先安装了Slick-Carousel:
npm install slick-carousel --save
然后:
import "~slick-carousel/slick/slick.css";
import "~slick-carousel/slick/slick-theme.css";
注意:但是请注意,Slick-Carousel在jQuery上具有同行依赖性您或您的同事可能不喜欢在您的控制台上看到的人输出,因此您可以随时从那里抓住CSS并将其转换为您可能正在使用的JS解决方案中的任何CSS。
此信息来自React-Slick文档页面。