【问题标题】:Is there any way to set a node-sass configurations file?有没有办法设置 node-sass 配置文件?
【发布时间】:2019-05-04 09:29:33
【问题描述】:

我一直在搜索并发现一些似乎已弃用的问题和实现,但我不确定(因为我试图实现它们但失败了)。


如果还是不清楚,我想实现的是这样的命令行:

直接在命令行或 npm 脚本中,我们会使用这样的东西:

node-sass --config sassconfig.json

sassconfig.json 中,我们会有如下代码:

{
  "outputStyle": "compressed",
  "sourceMap": true
}

这种设置会使其更加优雅和直接,就像tsconfig.json

【问题讨论】:

    标签: sass node-sass


    【解决方案1】:

    通常你不会使用 npm 命令手动渲染 Sass。将 Sass 集成到您的网络服务器中,并在服务器启动并且您的观察程序识别代码中的更改(nodemon、Webpack 热模块等)时呈现它

    这是 expressJs 服务器的示例:

    https://stackoverflow.com/a/26277894/6564085
    
    Let me quote swervos' answer from the link to save the snippet in this answer: 
    
        var connect = require('connect');
    var sass = require('node-sass');
    
    var srcPath = __dirname + '/sass';
    var destPath = __dirname + '/public/styles';
    
    var server = connect.createServer(
        sass.middleware({
            src: srcPath,
            dest: destPath,
            debug: true,
            outputStyle: 'expanded',
            prefix: '/styles'
        }),
        connect.static(__dirname + '/public')
    );
    

    如果你想使用 Webpack,这里有一个 webpack 版本:

    https://stackoverflow.com/a/46059484/6564085

    让我引用 Arnelle Balane 的话。

    {
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            use: [{
                loader: 'css-loader'
            }, {
                loader: 'sass-loader',
                options: {
                    outputStyle: 'expanded'
                }
            }]
        })
    }
    

    更多信息在这里:https://www.npmjs.com/package/sass-loader

    【讨论】:

    • 为什么不用 npm 来渲染 Sass?
    • 就像我说的。你的服务器设置应该渲染 Sass。当您拥有 NodeJs 服务器时,您将拥有不同的脚本。当您编辑前端时,带有热重载的开发模式的一个脚本,此过程也将呈现 Sass。和生产模式,如果你想释放当前的网站状态。复杂的服务器比 Sass 有更多的东西要渲染。例如 pug 文件、typescript、vue 等。你不应该使用单个 npm 命令手动渲染它们。
    • 那么,你说的不是像 Grunt 这样的任务运行器,对吧?
    • 检查这个节点服务器,你会明白我的意思:github.com/ihadeed/express-super-starter?files=1
    猜你喜欢
    • 1970-01-01
    • 2023-04-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-29
    • 2018-09-26
    • 2019-08-27
    • 1970-01-01
    相关资源
    最近更新 更多