Question

我有一个使用webpack构建的Web应用程序。我有许多样式变体，这些样式都称为style.css，并在各自的目录中，如

./ STYLE_A / style.scss
./ STYLE_B / style.scss
./ STYLE_F / style.scss

我正在向webpack提供交叉env变量STYLE_DIR，我希望该变量控制scss的包含位置。

我试过了：

require(`./${STYLE_DIR}/style.scss`); //in the webpack (does nothing)

我试过了：

require(`./${STYLE_DIR}/style.scss`); //in my client.js (ends up including every style.scss from every one of the style directories)

我已经尝试将此设置为webpack中的'process.env'变量，我尝试使用别名来解析，我只是缺少一些东西。

Answer 1

我对你的问题感兴趣，然后我做了一些研究，我想我有办法让它发挥作用。

步骤：

1。在Webpack配置文件中使用DefinePlugin以获得可在编译时设置的常量。你这样做：

const GLOBALS = {
  'process.env.STYLE_DIR': JSON.stringify(process.env.STYLE_DIR)
};

export default {
  entry: [
    './app/index'
  ],
  output: {
    path: path.resolve(__dirname, '/dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin(GLOBALS)
  ],
  ...
}

2。将style.scss文件放在正确的文件夹中（如您所示，STYLE_A，STYLE_B和STYLE_C）。

3。在你的.js文件中需要你的SCSS文件如下（当然一定要在Webpack配置文件中正确设置相应的加载器）：

require(`./${process.env.STYLE_DIR}/style.scss`);

4。在运行webpack之前设置STYLE_DIR变量。像这样：

导出STYLE_DIR ='STYLE_A'

这对我有用。如果我在运行Webpack之前更改了STYLE_DIR值，我会导入一个不同的样式文件。

我希望这会有所帮助。

包含特定的.css有条件的web包

1 个答案: