Question

我有一个项目正在使用标准设置，使用多个sass文件和部分编译成单个全局css文件。

我现在需要将单个sass文件映射到单个css文件（这些是组件/小部件）的功能。

因此，在我的最终标记中，小部件将具有如下内容：

where upcase(name) contains upcase("&variable");

我在gruntfile中尝试了一些选项。目前的设置如下：

<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/widgets/widget-name.css"/>

我尝试过以下方法：

 sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                 "Webcontent/css/site.css": "WebContent/source/sass/site.scss"
            }
        } 
    },
    watch: {
        src: {
            files: ['WebContent/source/sass/*.scss'],
            tasks: ['sass'],
        }
    }

以及：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                 "Webcontent/css/site.css": "WebContent/source/sass/site.scss",
                 "Webcontent/css/widgets/*.css": "WebContent/source/sass/widgets/*.scss",
            }
        } 
    },

我一直在grunt中收到错误：警告：sass: { dist: { options: { style: 'compressed' }, files: [ {src: 'WebContent/source/sass/site.scss', dest: 'Webcontent/css/site.css'}, {src: 'WebContent/source/sass/widgets/*.scss', dest: 'Webcontent/css/widgets/*.css' }, ], } }, watch: { src: { files: ['WebContent/source/sass/*.scss', 'WebContent/source/sass/widgets/*.scss'], tasks: ['sass'], } }

当然，我不必指定目标css文件？

任何帮助非常感谢。

Answer 1

根据您的第一个解决方案和http://ryanchristiani.com/getting-started-with-grunt-and-sass/，您的“观看”文件应该更像是这样：

（不确定它是否真的有所作为，但最好试一试）

watch: {
  src: {
    files: 'WebContent/source/sass/*.scss',
    tasks: ['sass'],
  }
}

否则，以这种方式构建 Gruntfile.js 通常会更容易：

（只有 main.scss 被编译，所有其他 .scss 文件都是@import到 main.scss 中）

watch: {
  sass: {
    files: './assets/css/sass/*.scss',
    tasks: ['sass', 'cssmin']
  }
},
sass: require( './assets/custom_modules/sass.js' ).task,
cssmin: require( './assets/custom_modules/cssmin.js' ).task

然后在 sass.js

exports.task = {
  dist: {
    options: {
      style: 'expanded',
      lineNumbers: true,
      sourcemap: 'none'
    },
    files: [{
      expand: true,
      cwd: 'assets/css/sass/',
      src: [ 'main.scss' ],
      dest: 'assets/css/',
      ext: '.css'
    }]
  }
};

希望它可以提供帮助。

祝你好运

Answer 2

要编译文件夹中的所有文件，您可以执行以下操作：

sass: {
    dist: {
        files: [
          {
            expand: true, // Recursive
            cwd: "WebContent/source/sass", // The startup directory
            src: ["**/*.scss"], // Source files
            dest: "Webcontent/css", // Destination
            ext: ".css" // File extension 
          }
        ]
    }
}

尝试使用Grunt为单个sass文件创建单个css文件（以及使用多个sass文件到一个css文件）

2 个答案: