Question

我尝试使用node-sass-middleware但未创建.css个.scss文件。

我的文件结构（简化）是

- node-modules
- public
     |- common
     |     |-sass
     |     |     |-style.scss
     |     |-css
- server.js

并且server.js中的代码有

var cssLoc =  __dirname + "\\public\\common\\css";
var cssDest =  __dirname + "\\public\\common";
console.log(cssLoc);
console.log(cssDest);
app.use(sass({
    src: cssLoc,
    dest: cssDest,
    debug: true,
    outputStyle: 'compressed'
}));

app.use(express.static(__dirname + '/public'));

我不知道为什么这不起作用。这非常令人沮丧。

Answer 1

它不起作用的可能原因是，令人困惑的是 node-sass-middleware 将采用其 src 和 dest 属性，然后查看html 标记中的本地 css 文件引用，获取它们引用的路径，并在 src中查找这些确切的路径和 dest 路径。

示例（在您的app.js文件中）：

var nodeSassMiddleware = require('node-sass-middleware'); app.use(nodeSassMiddleware({ src: path.join(__dirname, 'assets'), dest: path.join(__dirname, 'public') });

然后在你的基础html文件中包含一个像这样的链接标记：

<link rel="stylesheet" type="text/css" href="/immediate/style.css"

node-sass-middleware 会查找 /assets/immediate/style.scss 并将该文件输出到 /public/immediate/style.css < /强>

一旦你意识到发生了什么，它实际上非常漂亮:)，在你的控制台中启动你的服务器并访问浏览器中的链接，你将在控制台中记录正在使用的实际源和目标路径。

把头撞到墙上一会儿搞这个，希望它有所帮助！

Answer 2

使用具有以下目录结构的原始示例：

- node-modules
- public
     |- common
     |     |-sass
     |     |     |-style.scss
     |     |-css
- server.js

在您呼叫server.js的{{1}}中，您似乎错误地设置了node-sass-middleware和src属性。例如，

dest

用于填充

var cssLoc =  __dirname + "\\public\\common\\css";

属性的

应该是* .scss文件的路径，而是指向CSS目标目录。同样，src属性

dest

在您设置var cssDest = __dirname + "\\public\\common";的{{1}}块中，您应该能够查看控制台中启动应用程序时使用的路径，以验证它们是否正确：

sass-node-middleware

这可以重构为：

debug: true

这应该将你的SASS编译成CSS，但正如SirRodge先前的回答所提到的，你仍然有你的路径来解决CSS的app.use(sass({ src: cssLoc, dest: cssDest, debug: true, outputStyle: 'compressed' }));请求。如果您使用express.static内置中间件，app.use(sass({ src: path.join(__dirname, 'public', 'common', 'sass'), dest: path.join(__dirname, 'public', 'common', 'css'), debug: true, outputStyle: 'compressed' }));来提供来自名为get的目录中的文件，并且在您的HTML中通过说app.use(express.static(path.join(__dirname, 'public')));引用CSS，那么您需要将public属性添加到中间件：

/common/css/style.css

node-sass-middleware没有做任何事情

2 个答案: