【发布时间】：2018-07-24 13:19:49
【问题描述】：
在这里反应初学者。我的应用程序使用 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，它会起作用，但我宁愿避免该网络调用，因为我认为它会影响初始加载时页面的呈现。
我尝试按照 instructions 配置 create-react-app 以使用相对路径，但这对我也不起作用。也许我完全误解了，但我认为 ~ 符号可以让我从 /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'
}
}
],
}
【问题讨论】：
-
这似乎与 webpack configuration 有关，您可能希望从下向上滚动以找到解决方案，基本上我会检查是否允许 webpack 通过
resolve处理.scss文件@部分配置 -
谢谢 - 我已经用
webpack.config中的当前内容更新了我的帖子 - 我已经设置为处理 .scss 文件。 -
另一件事 - 我还将 susy 和 normalize 导入到我的主要 styles.scss 中，没有任何问题；只有当我导入 slick-themes.css 和 slick.css 时才会出现问题。
-
抱歉，打扰了，这几天我发布了一个react carousel slider组件，通过
npm install react-carousel-slider安装它，不需要导入其他东西，默认css样式但仍然努力为自定义 css 提供灵活性，也许您可以尝试一下：)
标签： reactjs react-slick css-import