希望有人有想法。
我想要两个文件,一个用于移动设备,一个用于台式机/平板电脑。我还没有找到任何使用 webpack 的解决方案。
目前,我将我的 css 包含在 js 代码中,如下所示:
import * as React from "react";
import {Component} from "react";
require('./image.scss');
这是我当前的 webpack 配置:
let path = require("path");
let webpack = require("webpack");
let nodeExternals = require("webpack-node-externals");
let ExtractTextPlugin = require('extract-text-webpack-plugin');
const desktopCSS = new ExtractTextPlugin({
filename: 'css/application-desktop.min.css',
allChunks: true
});
const mobileCSS = new ExtractTextPlugin({
filename: 'css/application-mobile.min.css',
allChunks: true
});
module.exports = [
{
entry: './src/client/Client.tsx',
output: {
path: __dirname + '/public/assets',
filename: 'js/application.min.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'src/common/elements')
],
use: desktopCSS.extract({
use: [
{
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
data: "$isWide: true;$isMobile: false;"
}
}]
})
},
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'src/common/elements')
],
use: mobileCSS.extract({
use: [
{
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
data: "$isWide: false;$isMobile: true;"
}
}]
})
},
{
test: /\.(png|jpg|svg)$/,
loader: 'file-loader?name=[path][name].[ext]&context=src/'
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.png', '.jpg', '.svg']
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
}),
desktopCSS,
mobileCSS
],
externals: [{
'react': 'React',
'react-dom': 'ReactDOM',
'react-redux': 'ReactRedux',
'redux': 'Redux'
}, 'bowser', nodeExternals()],
}
];
这是一个示例 scss 文件:
@import "../../data/colors";
.organism-header
{
.top
{
border-bottom: 2px solid $color-golden;
@if $isWide
{
height: 105px;
}
@if $isMobile
{
height: 70px;
.element-icon.type-burger
{
top: 17px;
margin-left: 20px;
}
.element-icon.type-logo
{
position: absolute;
top: 10px;
right: 20px;
}
}
}
}
我想在我的 sass 文件中使用$isWide和$isMobile来分隔输出。但以目前的方式,我只有一个文件 application-desktop.min.css
任何想法或另一种/更好的方式?谢谢!
问候疯狂x13th