Question

说，你有一些想要在css和js代码之间共享的变量：

vars.js：

module.exports = {
    'body-margin': '100px',
};

style.css：

body {
    margin: var(--body-margin);
}

entry.js：

var vars = require('./vars.js');
require('./style.css');
document.body.appendChild(
    document.createTextNode(vars['body-margin']));

我使用postcss-cssnext / postcss-custom-properties插件执行此操作：

webpack.config.js：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {                         
    entry: './entry.js',                   
    output: {                                                                              
        filename: 'bundle.js',             
    },                                                                                     
    module: {                                                                              
        rules: [{                          
            test: /\.css$/,                
            use: [                         
                'style-loader',            
                'css-loader',
                {loader: 'postcss-loader',
                options: {
                    plugins: [
                        require('postcss-cssnext')({
                            features: {
                                customProperties: {
                                    variables: require('./vars.js'),
                                },
                            },
                        }),
                    ],
                }},
            ],
        }],
    },
    plugins: [new HtmlWebpackPlugin()],
};

但是当我在webpack-dev-server中运行vars.js并更改变量时，javascript代码会注意到更改，但css代码并没有。有没有办法来解决这个问题？使css反映更改而不重新启动webpack-dev-server。附：如果有的话，我还没有使用postcss / cssnext / postcss-custom-properties来共享变量。

package.json：

{
  "dependencies": {
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "postcss-cssnext": "^3.0.2",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

Answer 1

我已经提出了以下修复方法：

diff --git a/webpack.config.js b/webpack.config.js
index 0046862..73c75a1 100644                                               
--- a/webpack.config.js                              
+++ b/webpack.config.js                 
@@ -1,5 +1,20 @@                                    
+var path = require('path');                                         
 var HtmlWebpackPlugin = require('html-webpack-plugin');           

+var varsFile = './vars.js';            
+                                                                                  
+var postcssCssnextFeatures = require('postcss-cssnext/lib/features').default;
+var customPropertiesPlugin;
+postcssCssnextFeatures.customProperties = (options) => {       
+    customPropertiesPlugin = require('postcss-custom-properties')(options);
+    return customPropertiesPlugin;                  
+};                                     
+                                                           
+function getVars() {                                                
+    delete require.cache[require.resolve(varsFile)];              
+    return require(varsFile);
+}
+
 module.exports = {
     entry: './entry.js',
     output: {
@@ -17,7 +32,7 @@ module.exports = {
                         require('postcss-cssnext')({
                             features: {
                                 customProperties: {
-                                    variables: require('./vars.js'),
+                                    variables: getVars(),
                                 },
                             },
                         }),
@@ -26,5 +41,22 @@ module.exports = {
             ],
         }],
     },
-    plugins: [new HtmlWebpackPlugin()],
+    plugins: [
+        new HtmlWebpackPlugin(),
+        {apply: function(compiler) {
+            compiler.plugin('compilation', function(compilation) {
+                compilation.plugin('succeed-module', function(module) {
+                    if (module.resource
+                    && module.resource.indexOf(path.resolve('node_modules')) == -1
+                    && path.extname(module.resource) == '.css'
+                    && module.fileDependencies.indexOf(varsFile) == -1   // extract-text-webpack-plugin, for instance, makes webpack build modules twice
+                    ) {
+                        module.fileDependencies.push(varsFile);
+                    }
+                });
+            });
+            compiler.plugin('invalid', function(filename) {
+                customPropertiesPlugin.setVariables(getVars());
+            });
+        }},
+    ],
 };

我遇到的问题：

postcss-custom-properties插件返回一个setVariables method的对象，可用于更新变量。但postcss / cssnext并未提供easy way来访问该对象。所以我使用补丁postcss-cssnext/lib/features.js来拦截对象并放入customPropertiesPlugin变量。
我不能简单地要求vars.js。内容已缓存。

如果你知道任何更简单的方法，如果你告诉我，我会很感激。或者也许只是一个想法。或者改善我的解决方案的方法。理想情况下，我猜必须有postcss插件允许@import个javascript文件。

如何告诉webpack有关额外的依赖项？

1 个答案: