将scss文件转换成css文件

Posted 2023-03-31 庸懒

大家平时做项目肯定都习惯了使用scss或者less去写样式，如果是使用工程化的项目我们可以借助插件很方便的将scss或者less转换成css。那如果我们没有使用工程化，比如简单的demo或者官网等项目又希望可以通过scss去编写文件应该怎么办呢，我们可以借助sass插件去帮我们转换生成css样式文件，原理和工程化其实是一样的，只是我们手动的去触发了sass的能力。

1.安装sass

首先在我们的项目下安装sass

npm i sass 

2.使用命令转译scss或sass文件

假设我们的页面都在page目录下，每个页面为一个文件夹，存放的是html文件和scss文件，例如下面的index

在index.html文件中我们无法直接使用scss文件，所以我们可以使用下面的命令先将scss文件转译为css文件：

 sass .\\index.scss .\\index.css

注意控制台的起始路径，路径拼接以后一定要指向一个具体的文件。假如我的项目名为demo，它存放在D盘的project文件夹下，我的控制台的窗口显示起始路径假设为D:\\project，那么我们的命令应该更改为：

sass .\\demo\\page\\index\\index.scss .\\demo\\page\\index\\index.scss

运行这段命令后sass会将我们指定的scss文件转换为css文件

这个时候我们就可以在html中引入转换好的css文件

3.监听scss变化更新css文件

在开发中如果我们总是手动输入命令去生成css文件这肯定是让人无法忍受的，所以我们可以借助一个指令去完成监听，它就是--watch，当我们输入如下命令时

sass --watch .\\demo\\page\\index\\index.scss .\\demo\\page\\index\\index.scss

这个时候就会开启指定文件的更改监听，每当我们更改保存index.scss文件时，index.css都会自动被更新。

Webpack - 如何将 scss 编译成单独的 css 文件？

【中文标题】Webpack - 如何将 scss 编译成单独的 css 文件？

【英文标题】：Webpack - how to compile scss into a separate css file?

【发布时间】：2017-03-14 09:04:37

【问题描述】：

我想使用一个条目 - materialize.scss（它导入许多其他 scss 文件）并将其编译成单独的输出 - materialize.min.css 文件。

我究竟如何使用 Webpack 做到这一点？

我用extract-text-webpack-plugin 以及css、style、sass loader、node-sass、resolve-url-loader 尝试了一百万种不同的设置，尽管我会遇到不同的错误，而修复一个只会导致另一个错误所以...我迷路了！

【问题讨论】：

Webpack 最初用于打包 JS，JS 模块需要样式。请分享你的JS。如果您只需要编译样式，您可以采用其他方式：npm 脚本或 gulp

我知道 Webpack 是什么，而且我很确定它能够完成这样的任务，而无需在 JS 中导入样式。提取文本 webpack 插件。

来自it's readme: It moves every require("style.css") in entry chunks into a separate css output file.

【参考方案1】：

这是我在尝试将 css 编译成单独文件时使用的 webpack.config.js 文件

|-- App 
    |-- dist
    |-- src
        |-- css
            |-- header.css
        |-- sass
            |-- img
            |-- partials
                |-- _variables.scss
            |-- main.scss
        |--ts
            |-- tsconfig.json
            |-- user.ts
        |-- main.js
    |-- app.js
    |-- webpack.config.js


var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCss = new ExtractTextPlugin("css/style.css");
var autoprefixer = (require("autoprefixer"))( browsers: ['last 2 versions'] );
var precss = require("precss");
var sugarss = require('sugarss');
var colormin = require('postcss-colormin');
var path = require("path");

module.exports = 
    entry: 
        app: ['./src/sass/main.scss', './src/main.js']
    ,
    //devtool:"source-map",
    output:
        filename: "bundle.js",
        path: path.resolve(__dirname,"dist"),
        publicPath: "/dist/"
    ,
    resolve: 
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    ,
    module:
        loaders:[
            
                test:/\.s?(a|c)ss$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("css!postcss!sass")
            ,/*
            
                test:/\.css$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader", "postcss-loader","precss")
            ,*/
            
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            ,
            
                test: /\.ts$/,
                loader: 'ts-loader'
            
        ]
    ,
    plugins: [
        new ExtractTextPlugin("bundle.css")
    ],
    postcss: function()
      return 
        plugins: [ autoprefixer, precss ]
      
    

【参考方案2】：

先决条件

css 加载器 节点-sass sass 加载器 样式加载器 extract-text-webpack-plugin

$ npm install css-loader node-sass sass-loader style-loader extract-text-webpack-plugin --save-dev

webpack.config.js

这是我的演示webpack.config.js，根据你的项目结构更改路径：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const srcPath = path.join(__dirname, 'src');
const dstPath = path.join(__dirname, 'dst');

const sassLoaders = [
    'css-loader?minimize',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + srcPath
];

module.exports = 
    entry: 
        client: './src/js/client'
    ,
    module: 
        loaders: [
            /*README:https://github.com/babel/babel-loader*/
            
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: 
                    presets: ['react', 'es2015'],
                    cacheDirectory: true
                ,
                plugins: ['transform-runtime']
            ,
            
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            ,
            
                test: /\.(png|jpg|bmp)$/,
                loader: 'url-loader?limit=8192'
            
        ]
    ,
    output: 
        path: dstPath,
        filename: '[name].js'
    ,
    plugins: [
        new ExtractTextPlugin('[name].min.css')
    ]
;

还有 GitHub 上的 demo project。