1

希望有人有想法。

我想要两个文件,一个用于移动设备,一个用于台式机/平板电脑。我还没有找到任何使用 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

4

0 回答 0