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

Question

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

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

所以在我的最终标记中，小部件将具有类似的内容：

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

我已经在我的 gruntfile 中尝试了几个选项。当前设置如下所示：

 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",
            }
        } 
    },

以及：

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'],
        }
    }

我一直在 grunt 中收到错误：警告：Warning: Unable to write "Webcontent/css/widgets/*.css" file (Error code: ENOENT ).

我真的不必指定目标 css 文件吗？

非常感谢任何帮助。

Answer 1

要编译文件夹中的所有文件，您可以这样做：

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 
          }
        ]
    }
}

Answer 2

根据您的第一个解决方案和 http://ryanchristiani.com/getting-started-with-grunt-and-sass/，您的 "watched" 文件更可能如下所示：

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

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'
    }]
  }
};

希望对您有所帮助。

祝你好运'

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

Trying to create single css file for single sass file (as well as using multiple sass file to one css file) with Grunt

css

compilation

sass

gruntjs