在这里反应新手。我的应用程序使用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'
}
}
],
}