Question

我遇到的问题是node-sass-middleware没有在这里呈现我的css是我的中间件代码：

  // adding the sass middleware
  app.use(sassMiddleware({
    /* Options */
    src: path.join(__dirname, "public/sass"),
    dest: path.join(__dirname, "public/css"),
    debug: true,
    outputStyle: 'compressed',
    prefix:  '/static/css'  // Where prefix is at <link rel="stylesheets" href="prefix/style.css"/>
}));
app.use(express.static(path.join(__dirname, 'public')));

我在控制台上看到了这个：

  source: ~\public\sass\style.scss
  dest: ~\public\css\style.css
  read: ~\public\css\style.css

但是css文件永远不会呈现，网站也不会收到该文件。

以下是来自package.json的依赖列表以获取更多信息：

"dependencies": {
    "ejs": "~2.5.2",
    "express": "~4.14.0",
    "node-sass": "^3.13.0",
    "node-sass-middleware": "^0.10.0"
  }

编辑，如果我删除前缀行我得到：

  source: ~\public\sass\static\css\style.scss
  dest: ~\public\css\static\css\style.css
  read: ~\public\css\static\css\style.css

编辑Filetree：

│   index.js
│   package.json
│
├───public
│   ├───css
│   ├───img
│   │       background.jpg
│   │
│   ├───js
│   └───sass
│           captus.sass
│
├───routes
│       index.js
│
└───views
    │   main.ejs
    │
    └───partials
        └───main
            └───pages
                    about.ejs
                    home.ejs

Answer 1

您需要将转换模式设置为Transpile *.sass文件，添加

// adding the sass middleware
app.use(sassMiddleware({
/* Options */
    src: path.join(__dirname, "public/sass"),
    dest: path.join(__dirname, "public/css"),
    debug: true,
    indentedSyntax: true,//add this to use SASS files
    outputStyle: 'compressed',
    prefix:  '/static/css'
}));

Answer 2

将我的sass文件重命名为scss修复了问题。

感谢am11在这里为我提供了他自己的工作示例，最终导致了修复：https://github.com/sass/node-sass-middleware/issues/70

node-sass-middleware无法使用express

2 个答案: