[英]styles imported with css-loader not working
使用Bootstrap 4.1.1構建React 16.4.0應用
我將css-loader和webpack一起使用來為我的應用程序中的每個組件創建自定義樣式表。
我的自定義樣式沒有任何作用。 我以為可能是引導樣式具有更多點的問題,但是即使我添加了任何引導元素之外的元素,我的樣式也不會起作用。
基本示例:
Sidebar.js組件:
import React from 'react';
import classes from './Sidebar.css';
const sidebar = (props) => {
console.log('classes.red:', classes.red);
return (
<div>
<h3 className={classes.other}>Testing Stylesheet</h3>
<nav className="col-sm-3 col-md-2 hidded-xs-down sidebar" id={classes.red}>
<ul className="nav flex-column">
<li className="nav-item">
<a className="nav-link active" href="#">
FF1493
</a>
</li>
<li className="nav-item">
<a className="nav-link active" href="#">
FF4500
</a>
</li>
</ul>
</nav>
</div>
)
}
export default sidebar;
這是超簡單的樣式表:
#red {
background-color: rgba(214, 21, 21, 0.842)
}
.other {
color: green;
}
在Sidebar.js中,您可以看到我在哪里進行控制台。記錄導入的“紅色”樣式。 這是瀏覽器控制台中記錄的內容: classes.red: Sidebar__red__2-sUP
<-它會classes.red: Sidebar__red__2-sUP
引入唯一標識符。
對於那些想知道的人,這里是我的webpack.config:
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/client/dist');
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
path: path.resolve(__dirname, 'client/dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
plugins: ['syntax-dynamic-import'],
},
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
// sourceMap: shouldUseSourceMap,
modules: true,
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 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
// extractTextPluginOptions
)
)
},
],
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
},
}),
new ExtractTextPlugin("styles.css"),
// ,
// new UglifyJSPlugin(),
],
};
可能是由於我注釋掉了webpack.config中的某些內容: sourceMap: shouldUseSourceMap,
在options和extractTextPluginOptions
嗎?
我注釋掉了它們,因為在安裝過程中出現錯誤,並且不能100%確定它們的作用。 我對Webpack的使用仍在增長,並從使用Facebook的create-react-app構建的另一個應用程序中借用了一些配置設置。
歡迎輸入。 先感謝您! 麥克風
你應該能夠 :
import './Sidebar.css'; //don't name the import
然后在你的元素上使用類
<h3 className="other">Testing Stylesheet</h3>
(並按照@Leo的建議,打開“開發工具”並搜索css以查看是否將其發送到瀏覽器)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.