2
我正在使用scss进入我的反应应用程序。问题我得到的是当我为常量选择器如h1,h2,p,ul,li编写css时,公认。但是当我为类或ID选择器编写CSS时,样式不适用。webpack sass-loader不会生成类选择器样式
工作情况
h1, h2 {
padding:0px;
}
不工作的情况下
.main {
padding:10px;
}
我正在使用scss进入我的反应应用程序。问题我得到的是当我为常量选择器如h1,h2,p,ul,li编写css时,公认。但是当我为类或ID选择器编写CSS时,样式不适用。webpack sass-loader不会生成类选择器样式
工作情况
h1, h2 {
padding:0px;
}
不工作的情况下
.main {
padding:10px;
}
我有同样的问题。我webpack.config.js现在看起来是这样的:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
entry: './app/index.js',
module: {
rules: [
{
test: /(\.css|\.sass|\.scss)$/,
exclude: /node_modules/,
use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: 'css-loader' // translates CSS into CommonJS
},
{
loader : 'sass-loader',
options: {
sourceMap: true
}
},
{
loader : 'postcss-loader',
options: {
plugins: function() {
return [
require("autoprefixer")
];
}
}
}
]
})),
},
{
test: /\.(js)$/,
exclude: /(node_modules|bower_components)/,
use : ['babel-loader']
}
]
},
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/' // avoid requesting server route instead of client route when hitting refresh /Cannot GET /route
},
plugins : [
new HtmlWebpackPlugin({
template: 'app/index.html'
}),
new ExtractTextPlugin({ filename: 'css/style.css', disable: true, allChunks: true }), // this means dist/css/style.css
]
};
if(process.env.NODE_ENV === "production"){ // 'production ready'
config.plugins.push(
new webpack.DefinePlugin({
'process.env' : {
'NODE_ENV' : JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.optimize.UglifyJsPlugin({ sourceMap: true, minimize:
true })
)
}
module.exports = config;
我有一个fallbackLoader: 'style-loader'
属性之前,并在查询属性一些未使用的CSS加载程序选项。也许这有帮助。 上面的配置按预期工作。
请分享您的webpack配置请求和有问题的部分反应代码(如果可能的话) –
在您的加载程序选项中是否设置了“模块”标志? – larrydahooster