[英]Webpack not picking up imports of scss files in react components
I want to set up my react project with an scss file for each component. 我想为每个组件设置一个带有scss文件的react项目。 So given a component called PermissionPicker I want to import a PermissionPicker.scss in the jsx file.
因此,给定名为PermissionPicker的组件,我想在jsx文件中导入PermissionPicker.scss。
With my current set up the webpack loaders are only loading scss files when imported in my entry point (boot-client.tsx). 使用我当前的设置,webpack加载器仅在导入到我的入口点(boot-client.tsx)中时才加载scss文件。 import './PermissionPicker.scss' in my PermissionPicker components causes a webpack error:
在我的PermissionPicker组件中导入“ ./PermissionPicker.scss”会导致Webpack错误:
Module parse failed: PermissionPicker.scss Unexpected token (1:1) You may need an appropriate loader to handle this file type. 模块解析失败:PermissionPicker.scss意外令牌(1:1)您可能需要适当的加载器来处理此文件类型。
I was under the impression that I could import scss anywhere in my project similar to how create-react-app works. 我的印象是,我可以在项目中的任何地方导入scss,类似于create-react-app的工作原理。
Any advice would be great! 任何建议都很好!
Below is my webpack config. 以下是我的webpack配置。
const sharedConfig = () => ({
stats: { modules: false },
resolve: { extensions: [ '.js', '.ts', '.tsx', '.jsx' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' /
},
module: {
rules: [
{ test: /\.tsx?$/, include: /client/, use: 'babel-loader' },
{ test: /\.tsx?$/, include: /client/, use: 'awesome-typescript-loader?silent=true' }
]
},
plugins: [new CheckerPlugin()]
});
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
entry: { 'main-client': './client/boot-client.tsx' },
module: {
rules: [
{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },
{ test: /\.scss$/, use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{ test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
]
},
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new ExtractTextPlugin('site.css'),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]')
})
] : [
])
});
You need to install node-sass
with sass-loader
, because the sass-loader requires node-sass as peerDependency 您需要使用
sass-loader
安装node-sass
,因为sass-loader需要node-sass作为peerDependency
npm install sass-loader node-sass --save-dev
And missing something as include: join(__dirname, 'src')
并且缺少一些内容,
include: join(__dirname, 'src')
rules: [
{
test: /\.css$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({ use: 'css-loader' })
},
{
test: /\.scss$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{ test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
]
The src
is a common path for Components, you need to indicate the path from the path of your config file src
是组件的通用路径,您需要从配置文件的路径中指明路径
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.