如何使用grunt-sass-replace替换sass变量值?

时间:2019-05-19 07:51:09

标签: node.js sass gruntjs node-modules

我想替换sass配置文件中的一些sass变量值。 例如,我要替换变量“ $ file_global” =“ new”;

我想使用“ grunt-sass-replace”包来完成工作,我尝试了很多,但是它给了我很多错误。

我的项目目录结构:

grep/
     /node_modules/
     package.json
     Gruntfile.js
     src/
         my-styles.scss

my-styles.scss 代码:

$file_global: "old";

Gruntfile.js 代码:

module.exports = function(grunt){
pkg: grunt.file.readJSON('package.json'),
grunt.initConfig({ 

'sass-replace': {

                  files: { // File Options
                            src: 'src/my-styles.scss',
                            dest: 'dest/my-styles.scss'
                  },
                  options: {
                    variables: [
                      {
                        name: 'file_global',
                        to: 'new'
                      }
                    ]
                  }
}

});

grunt.loadNpmTasks('grunt-sass-replace');
grunt.registerTask('default', ['sass-replace']);
};

package.json代码:

{
  "name": "grep",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "KJ",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.4",
    "grunt-sass-replace": "^0.1.18",
    "npm-check-updates": "^3.1.9"
  }
}

我更新了“文件” ,但它仍然给我带来各种错误。 以下是我尝试过的选项和产生的错误。

首次尝试

// Option First : 
                  files: {
                           'dest/my-styles.scss': 'src/my-styles.scss'
                  },

                  ERROR : 
                          C:\wamp64\www\GREP>grunt
                          >> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
                          Running "sass-replace:files" (sass-replace) task
                          Warning: no files passed. Use --force to continue..
                          Aborted due to warnings.

第二次尝试:

// Option Second : 
files: [
        {
           src: 'src/my-styles.scss',
           dest: 'dest/my-styles.scss'
        }

],

ERROR : 
        C:\wamp64\www\GREP>grunt
        >> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
        Running "sass-replace:files" (sass-replace) task
        Warning: pattern.indexOf is not a function Use --force to continue.
        Aborted due to warnings.

最后一次尝试:

// Option Third : 
files: {
           src: 'src/my-styles.scss',
           dest: 'dest/my-styles.scss'
        },


ERROR : 
        C:\wamp64\www\GREP>grunt
        >> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
        Running "sass-replace:files" (sass-replace) task
        >> [1] scss files found in [1] passed files.
        >> replacements resolved successfully.
        running string-replace task.
        Warning: Task "string-replace:sass" not found. Use --force to continue.
        Aborted due to warnings.

任何人都知道如何解决此错误,或者任何其他可以进行此类工作的grunt软件包。

1 个答案:

答案 0 :(得分:1)

此软件包的最新更新时间为3年前,并且使用grunt〜0.4.5。我不能帮您,但是请从https://www.npmjs.com/package/grunt-sass-replace-values检出“ grunt-sass-replace-values”。该软件包在一年前已更新并已修补。

npm安装grunt-sass-replace-values --save-dev

在Github上查看以下问题: https://github.com/eliranmal/grunt-sass-replace/issues/1


说明:


错误原因:

  • 您错误地定义了sass变量。变量应定义为“ $ variable:value;” ,而不是“ $ variable = value;”

  • 从该软件包的Github问题开始,您需要将路径更新为“ grunt-string-replace” 依赖项。


解决方案:

在您的项目根文件夹下,转到以下目录:

node_modules/grunt-sass-replace/tasks

在上述目录中后,查找文件名“ sass-replace.js”

只需使用任何文本编辑器打开文件,然后编辑依赖关系的路径即可。

grunt.task.loadTasks(path.resolve(__dirname, '../node_modules/grunt-string-replace/tasks'));

按您的情况进行编辑,如下所示:

grunt.task.loadTasks(path.resolve(__dirname, '../../../node_modules/grunt-string-replace/tasks'));

我希望这可以解决您的问题。如果不使用其他软件包,或者使用较旧的node和grunt(0.4.5)版本。