Reactjs 网页3+;Sass加载程序:无法将scss用作模块
我正在使用Webpack3+Sass加载器+Sass资源加载器构建一个多主题React应用程序 这是我的webpack.config:Reactjs 网页3+;Sass加载程序:无法将scss用作模块,reactjs,webpack,sass,Reactjs,Webpack,Sass,我正在使用Webpack3+Sass加载器+Sass资源加载器构建一个多主题React应用程序 这是我的webpack.config: { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { import
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
minimize: IS_PRODUCTION,
sourceMap: IS_DEVELOPMENT,
localIdentName: IS_DEVELOPMENT ? '[name]__[local]__[hash:8]' : '[hash:8]'
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: IS_DEVELOPMENT,
plugins: postCssPlugins,
}
},
],
}),
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: IS_DEVELOPMENT,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: IS_DEVELOPMENT
}
},
{
loader: 'sass-resources-loader',
options: {
sourceMap: IS_DEVELOPMENT,
resources: [
'./common/style/flaticon/_flaticon_class.scss',
`./common/branding/${BRANDING}/${BRANDING}.scss`,
'./common/style/bootstrap/_general_variables.scss',
'./node_modules/bootstrap/scss/bootstrap-reboot.scss', // functions, variables, mixins, reboot
'./node_modules/bootstrap/scss/_root.scss',
'./node_modules/bootstrap/scss/_type.scss',
'./node_modules/bootstrap/scss/_images.scss',
'./node_modules/bootstrap/scss/_grid.scss',
'./node_modules/bootstrap/scss/_utilities.scss',
]
},
},
]
})
},
实际上,它工作得很好,但是当我尝试将我的scss文件导入react组件并像css文件一样利用它时,类名是未定义的
在我的组件文件中:
import styles from './ActivityGridItem.scss';
...
<div className={`m-2 ${styles.activityTypeIcon}`}></div>
但是,每个sass文件都被识别为一个模块,我不能使用全局boostrap类,如row、col、m-*,等等。有几种方法可以做到这一点
- 您可以在css模块中使用,使引导类成为全局类
- 您可以创建两个加载程序,一个启用css模块,另一个启用全局样式,并以某种方式区分它们。例如,您可以使所有以
结尾的文件使用.module.scss
modules:true
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: IS_DEVELOPMENT,
}
},