在这里反应新手。我的应用程序使用create-react-app,而我正在使用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'
如果我从CDN将css添加到index.html,它会起作用,但是我宁愿避免该网络调用,因为我认为这会影响初始加载时页面的呈现。
我试着按照说明配置创建反应的应用程序内使用相对路径,但是,这不是为我工作无论是。也许我完全误会了,但是我认为〜表示法允许我从/ node_modules中的包中导入scss。
任何建议/澄清将不胜感激。
更新:从我的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' } } ], }
我在这个问题上苦苦挣扎,终于找到了解决方案:
node_modules
slick-carousel
slick.scss
slick-theme.scss
_slick.scss
_slickTheme.scss
app.scss
'./ajax-loader.gif'
/* 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; } }