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

Question

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

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

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

<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 错误:警告:警告:无法写入“Webcontent/css/widgets/*.css”文件(错误代码:ENOENT ).

我真的不必指定 objective-c ss 文件吗？

非常感谢任何帮助。

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

希望对您有所帮助。

祝你好运