Question

我正在尝试在离子项目中的'variables.scss'文件中查找/替换颜色，以便可以在配置文件中设置primary / secondary / ...颜色

我试图使用string-replace-webpack-plugin，但这似乎不起作用，它永远不会替换sass文件中的任何内容。虽然适用于其他文件，但这不是我想要的。

我想做的是：

variables.scss

$colors: (
  primary: <%= primary_color %>,
  secondary: <%= secondary_color %>,
  danger: <%= danger_color %>,
  light: <%= light_color %>,
  dark: <%= dark_color %>
);

webpack.config.js

const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const replacements = require('../config');
webpackConfig.module.loaders = [{
  test: /.*/,
  loader: StringReplacePlugin.replace({
    replacements: [
      {
        pattern: /<%= \s*(\w+)\s*%>/ig,
        replacement: (match, key, offset, string) => {
          return replacements[key];
        }
      }
    ]
  })
}, ...webpackConfig.module.loaders];
webpackConfig.plugins = [new StringReplacePlugin(), require(process.env.IONIC_WEBPACK_FACTORY).getIonicEnvironmentPlugin()];
module.exports = webpackConfig;

config.json

{
  "primary_color": "#488aff",
  "secondary_color": "#32db64",
  "danger_color": "#f53d3d",
  "light_color": "#f4f4f4",
  "dark_color": "#222"
}

但这不起作用：

[16:05:41]  build started ... 
[16:05:41]  deeplinks update started ... 
[16:05:42]  deeplinks update finished in 387 ms 
[16:05:42]  sass update started ... 
[16:05:42]  sass: src/theme/variables.scss, line: 23 
        Invalid CSS after " primary:": expected expression (e.g. 1px, bold), was "<%= primary_color %"

还有什么我可以使用/尝试appart来自一个hacky脚本，它找到并替换在构建过程之前运行的variables.scss文件中的原始颜色？

sass文件中的离子字符串替换

0 个答案: